Я настраиваю производительность приложения и натолкнулся на следующие отличия. Пожалуйста, посмотрите стек для живого примера.
Компоненты с суффиксом -on-push имеют ChangeDetectionStrategy.OnPush, тогда как компоненты с суффиксом -default имеют стратегию по умолчанию.
У меня есть два подхода, которые я назвал «внедренными» для первого и «ng-content» для второго. Разъяснение следует ниже.
корневой шаблон:
<h1>embedded</h1>
<app-embedded-on-push></app-embedded-on-push>
<h1>ng-content</h1>
<app-ng-content-on-push>
<app-ng-content-default></app-ng-content-default>
</app-ng-content-on-push>
Где app-embedded-on-push шаблон просто "встраивает" компонент app-embedded-default:
<app-embedded-default></app-embedded-default>
С другой стороны, шаблон app-ng-content-on-push s проецирует компонент app-ng-content-default с ng-content:
<ng-content></ng-content>
Пожалуйста, ознакомьтесь со стекабликом, чтобы получить лучшую идею.
ожидание
Поскольку компоненты с ChangeDetectionStrategy.OnPush проверяются (сам компонент и его дочерние элементы) только в случае изменения входных ссылок, я ожидаю, что на самом компоненте и его дочерних элементах обнаружение изменений не будет запускаться с обоими подходами, названными встроенным и подходом контент-проекции.
реальность
При встроенном подходе поведение такое, как и ожидалось, обнаружение изменений на app-embedded-default не будет срабатывать.
С другой стороны, при проекции содержимого (ng-content) обнаружение изменений дочернего компонента app-ng-content-on-push запускается , как вы можете видеть на приведенном выше стеке.
Может кто-нибудь объяснить, почему так поступают? Дерево компонентов одинаково на обоих подходах, или я ошибаюсь?