编辑

Question

我正在构建一个angular8应用程序，并且我的组件之一具有如下所示的HTML：

<mat-grid-list cols="4" style="margin: 5px">
  <mat-grid-tile *ngFor="let tile of tiles">
    <my-component [type]="tile.kind"
              [row] = "tile.row"
              [column] ="tile.column"              
              [state] = "tile.state"></my-component>
  </mat-grid-tile>
</mat-grid-list>

my-component组件的视图根据tile.state的内部值而变化。

我注意到，每当更新tiles数组时，视图都会改变，但会重新创建所有my-component元素。

是否有一种方法可以防止重新创建这些元素，而仅根据状态对象中的数据进行更改？

编辑

我想我没有尽我所能解释自己...

网格中的所有图块均应更新，而不仅仅是其中之一。我的问题是正在创建网格中的组件-我认为这确实损害了性能。
如果我的<my-component>里面有一个<img>，并且它是从state对象获取其值的，那么我只想重新创建<img>，但是<my-component>不应该。

有可能吗？

Answer 1

In the documentation，您会发现ngForTrackBy。语法是

*ngFor="let x of y; trackBy: myFn"

您的功能将通过

myFn(index: number, itemOfTheList: YourCustomType): number | string {}

此功能将是跟踪您的元素的功能。它应该返回一个原始类型（布尔，数字或字符串）以唯一地标识每个对象。

一旦对象具有您创建的唯一ID，for循环将仅重新创建所需的ID。

Answer 2

您可能想看看容器组件的if(this.word$ < this.words.length) { this.word$++; } else { clearInterval(this.interval) }标志 https://angular.io/api/core/ChangeDetectionStrategy

changeDetection

现在发生的事情只有在有新输入时才会重新渲染。现在，如果您执行tile [0] .state = new State（），则只会更新该元素。

Answer 3

我认为您应该设置另一个变量来设置状态，而不是在“ title”变量中声明它。

Angular-在不重新创建内部组件的情况下更新组件

编辑

3 个答案: