Да, Angular позаботьтесь об этом за вас!
Этот механизм работает, потому что Angular генерирует factory для каждого компонента.
Фабрика компонентов в основном состоит из узлов представлений, сгенерированных компилятором в результате синтаксического анализа шаблона.
Поскольку фабричный компонент имеет большой топи c, я просто остановлюсь на этом функция: updateRenderer
updateRenderer заботится об обновлении DOM компонента при необходимости.
Каждый компонент по умолчанию добавляется в TreeRenderList, массив объектов. Angular использовать этот массив для многих вещей. На мой взгляд, наиболее важными из этих двух функций являются следующие:
- Обновление DOM компонента.
- Обновление привязки компонента при их изменении
Обновите привязку компонента при его изменении, что это значит?
Давайте рассмотрим простой пример, чтобы объяснить это.
export class AppComponent {
@Input() myInput: string;
}
<p>{{myInput}}
Мы знаем, что при изменении myInput мы видим изменения в относительном html (по умолчанию). И это работает из-за функций TreeRenderList и updateRenderer.
Могу ли я запретить Angular обновить DOM компонента?
Да! и это очень легко. Если мы сгенерируем компонент, используя cli (ng g c component-name), его декоратор будет выглядеть примерно так:
@Component({
selector: 'my-component',
templateUrl: 'xxx.component.html',
styleUrls: ['xxx.component.css'],
})
Но есть много свойств, которые мы можем указать. Одним из них является changeDetection.
По умолчанию Angular использует стратегию Default, что означает, что платформа будет решать, как и когда обновлять DOM компонента.
Мы можем изменить его на OnPush. Делая это, мы сообщаем Angular, что ему не нужно обновлять DOM компонента в его логике c. Добавление этого свойства в декоратор приведет к следующему:
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'my-component',
templateUrl: 'xxx.component.html',
styleUrls: ['xxx.component.css'],
})
Если мы попытаемся обновить @Input, мы не увидим никаких изменений. Вот где ChangeDetectionRef приходит в нашу помощь. Чтобы использовать его, нам нужно inject включить его в компонент, и мы можем использовать this.changeDetectionRef.detectChanges(), чтобы программно сообщить Angular об обновлении DOM компонента.
Я написал подробное руководство по ChangeDetectionRef здесь, если вы хотите прочитать его: https://medium.com/@sciampi.jacopo / angular -performances-a-guide-to-change-Detection-b8a02c0b7b00