Angular - обновление компонента без воссоздания внутренних компонентов

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

В документации вы найдете ngForTrackBy.Синтаксис:

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

Ваша функция будет затем

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

Эта функция будет отслеживать ваши элементы.Он должен возвращать примитивный тип (булево, число или строка) для уникальной идентификации каждого объекта.

Как только объекты имеют уникальный идентификатор, который вы сделали, цикл for воссоздает только те, которые вам нужны.

Answer 2

вы можете захотеть взглянуть на флаг changeDetection для вашего компонента контейнера https://angular.io/api/core/ChangeDetectionStrategy

    @Component({
      selector: 'compA',
      template: '<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>',
      changeDetection: ChangeDetectionStrategy.OnPush
    })

То, что происходит сейчас, будет только пересчитано, когда появится новый вход.теперь, если вы сделаете тайлы [0] .state = new State (), он обновит только этот один элемент.

Answer 3

Я думаю, вы должны установить другую переменную для установки состояния, а не объявлять ее в переменной "title".