子组件是否会在 Angular 中重新渲染或重新初始化？

Question

我是 Angular(14) 的新手，我面临一个问题。当我更新父组件的属性（这是一个数组）时，子组件会重新初始化（ngOnInit 函数正在运行）。 在 for 循环中使用子组件时遇到此问题。

// parent Component ts file
students: string[] = ['student1', 'student2', 'student3', 'student4'];
  updateName(value: string, index: number) {
    console.log(index);
    this.students[index] = value;
  }
// template of Parent component
<app-search 
      *ngFor="let student of students; let i = index" 
      [student]="student"
      (changeName)="updateName($event, i)"
    >

// Child component ts file
searchValue = '';
@Input() student!: string;
  @Output() changeName = new EventEmitter<string>();
  updateName() {
    this.changeName.emit(this.searchValue);
  }
// template of Child component
<div class="search-container">
    <span>
        Search:
    </span>
    <input type="text" [(ngModel)]="searchValue">
    <p>{{searchValue}}</p>
    <p>Student Name: {{student}}</p>
    <button (click)="updateName()">Update</button>
</div>

当我更新名称输入字段时，它变得空白。我编写这段代码只是为了了解它是如何工作的（我知道这种代码可能没有任何用处）。 在 for 循环中使用子组件时遇到此问题。

如果我能得到任何参考就好了。

Answer 1

在

NgForOf

循环中，Angular 需要能够唯一标识渲染的每个项目，以便在发生更改时可以对该组件执行 DOM 更新。

那么如何帮助指令唯一标识元素呢？

我们可以通过提供 trackByFn 来做到这一点，这样如果该元素中的任何属性更新，指令就会更新该组件而不是渲染它。

如何使用trackByFn？

它只是一个将接收参数中的项目的函数，您（开发人员）将返回该对象上的唯一道具。

// HTML
<ng-container *ngFor="let student of students; let i = index;  trackBy: trackFn">
  <app-student [studentName]="student"></app-student>
</ng-container>

// TS
trackFn(student: Student) {
  return student.id;
}

参见此 stackblitz 示例 StackBlitz TrackByFn

希望有帮助:)