Angular7: Есть ли способ ограничить область действия нескольких одинаковых компонентов на одной странице?

Question

Я помещаю несколько одинаковых компонентов на страницу, и все они получают ввод. Когда один из этих входов изменяется, они все обновляются! Есть ли способ, чтобы все это не обновлялось?

<tr *ngFor="let map of imgs | keyvalue; index as i;">
    <td><app-preview [file]="map.value"></app-preview></td>
</tr>

Компонент:

<img *ngIf="src" [src]="src" alt="">

Компонент должен отправлять разные значения карты, но когда изменяется одно значение карты, обновляются все компоненты, это выглядит очень плохо.

Answer 1

В этом сценарии мы должны использовать функцию trackedBy.

Измените ваш код следующим образом.

В вашем html,

<tr *ngFor="let map of imgs | keyvalue; index as i; trackBy: trackByFn">
    <td><app-preview [file]="map.value"></app-preview></td>
</tr>

И в вашем tsfile

public trackByFn(index, item) {
    if(!item) return null;
    return index;
}

Это позволит избежать повторного рендеринга всего списка в DOM, когда ваш список будет обновлен.По умолчанию trackBy выполняется с использованием ссылок на объекты и изменяет его на trackBy по вашему индексу списка, чтобы весь домен не получал обновления.Итак ... повысит вашу производительность .

Для получения дополнительной информации, посмотрите на this