TemplateRef и обнаружение изменений

Question

Недавно я начал активно использовать шаблоны для настройки своих компонентов пользовательского интерфейса. Я также использую стратегию обнаружения изменений OnPush для оптимизации производительности. Все идет хорошо, если я передам шаблон на вложенный компонент. Действия пользователя инициируют обнаружение изменений во вложенном компоненте, и он перемещается к исходному компоненту, где определен шаблон, а также запускает обнаружение изменений, обновляя шаблон и любую другую логику, которая у меня там есть.

Однако, если я пытаюсь сделать, скажем, функциональность popup / alert / tooltip с шаблоном - я начинаю передавать TemplateRef вверх по дереву в компонент popup host. Поэтому, если я выполню какое-либо действие с ним - обнаружение изменений не достигнет источника шаблона. Итак, давайте предположим, что у меня есть этот компонент в псевдокоде:

<p>Your balance: {{balance}}</p>

<ng-template #popup>
  Your balance: {{balance}}
  <button (click)="balance -= 100">Withdraw</button>
</ng-template>

Если я передам этот шаблон компоненту всплывающего хоста, который расположен в дереве DOM:

<main-component>
   <balance></balance>
</main-component>
<popup-host></popup-host>

Тогда нажатие «Вывести» не вызовет обнаружение изменений в исходном компоненте. {{balance}} внутри шаблона во всплывающем окне будет обновлено, но, хотя это та же самая переменная, что и в компоненте исходного баланса - баланс не будет знать об этом изменении, пока что-то не вызовет его обнаружение изменений.

Кто-нибудь может поделиться идеей о том, как они будут подходить к этому вопросу? OnPush и шаблоны являются очень мощными инструментами, но я не могу придумать, как объединить их вместе в таком случае, поскольку TemplateRef не имеет никакой ссылки на свой исходный компонент, только на свой узел комментариев DOM.

Я мог бы принудительно передать ChangeDetectorRef исходного компонента во всплывающую службу, но я бы хотел найти решение для произвольного случая, подобного этому. Любые предложения будут с благодарностью!

Answer 1

Ну, в итоге я создал директиву:

<ng-template myDirective>
  Content
</ng-template>

И в этой директиве я ввожу TemplateRef и ChangeDetectorRef. Таким образом, вместо того, чтобы указывать TemplateRef туда, где мне был нужен этот шаблон, я даю ViewChild(MyDirective) и использую myDirective.template в качестве шаблона и вызываю markForCheck() для этого детектора изменений на ngAfterViewChecked() этого компонента.