Answer:8 - refactor heavy computation to pure pipe

apps/angular/8-pure-pipe/src/app/app.component.ts

@@ -1,19 +1,22 @@
+// app.component.ts
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-
+import { HeavyComputationPipe } from './heavy-computation.pipe';
 @Component({
   selector: 'app-root',
-  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: true,
+  imports: [HeavyComputationPipe],
+  changeDetection: ChangeDetectionStrategy.Default,
   template: `
     @for (person of persons; track person) {
-      {{ heavyComputation(person, $index) }}
+      {{ person | heavyComputation: $index }}
     }
   `,
 })
 export class AppComponent {
   persons = ['toto', 'jack'];
 
-  heavyComputation(name: string, index: number) {
-    // very heavy computation
-    return `${name} - ${index}`;
-  }
+  // heavyComputation(name: string, index: number) {
+  //   // very heavy computation
+  //   return `${name} - ${index}`;
+  // }
 }

apps/angular/8-pure-pipe/src/app/heavy-computation.pipe.ts

@@ -0,0 +1,13 @@
+// heavy-computation.pipe.ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'heavyComputation',
+  standalone: true,
+})
+export class HeavyComputationPipe implements PipeTransform {
+  transform(name: string, index: number): string {
+    console.log('触发了复杂计算:', name);
+    return `${name} - ${index}`;
+  }
+}

apps/angular/8-pure-pipe/src/index.html

@@ -1,3 +1,4 @@
+<!-- index.html -->
 <!doctype html>
 <html lang="en">
   <head>

apps/angular/8-pure-pipe/src/main.ts

@@ -1,3 +1,4 @@
+// main.ts
 import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';