Как повторно использовать шаблон ngTemplate, который оборачивает Viewchild, который обновляет его содержимое

Question

Я хочу повторно использовать ng-шаблон с viewchild, который динамически изменяется и обновлять его во всех местах, где я повторно использую ng-шаблон.Однако он не обновляется во всех местах.

Он работает, когда я делаю содержимое шаблона ng статическим, как это:

<h2>Position 1</h2>
<ng-container [ngTemplateOutlet]="statusTemplate"></ng-container>
<h2>Position 2</h2>
<ng-container [ngTemplateOutlet]="statusTemplate"></ng-container>
<ng-template #statusTemplate>
  <h3>Saved</h3>
</ng-template>

, который выводит следующий HTML:

Однако, когда я делаю h3 внутри ng-шаблона дочерним видом и пытаюсь обновить его динамически, он не обновляется в обоих местах.

например,

<h2>Position 1</h2>
<ng-container [ngTemplateOutlet]="statusTemplate"></ng-container>
<h2>Position 2</h2>
<ng-container [ngTemplateOutlet]="statusTemplate"></ng-container>
<ng-template #statusTemplate>
  <h3 #status></h3>
</ng-template>

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

@ViewChild('status', { static: false })
public status: any;

public setStatusTo(name: string): void {
  this.status.nativeElement.innerHTML = name;
}

HTML выглядит так, когда он запускается в браузере

  <h2 _ngcontent-rdv-c3="">Position 1</h2>
  <!--bindings={
    "ng-reflect-ng-template-outlet": "[object Object]"
  }-->
  <h3 _ngcontent-rdv-c3="">Success</h3>
  <h2 _ngcontent-rdv-c3="">Position 2</h2>
  <!--bindings={
    "ng-reflect-ng-template-outlet": "[object Object]"
  }-->
  <h3 _ngcontent-rdv-c3=""></h3><!---->

Как мне добиться обновления повторно использованного ng-шаблона в нескольких местах?Почему это не работает?

Answer 1

Я бы не стал делать это таким образом (кажется, что проще сохранить содержимое переменной h3 в переменной, а затем просто связать ее), но если вы хотите использовать этот подход, я бы использовал ViewChildren вместо ViewChild

import { Component, ViewChild, ViewChildren } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  @ViewChildren('status')
  public statusElements: any;

  public setStatusTo(name: string): void {
    this.statusElements.toArray().forEach(
      (status) => {
        status.nativeElement.innerHTML = name;
      }
    ) 
  }
}

Вы можете увидеть всю работу здесь: https://stackblitz.com/edit/angular-af19ma

Answer 2

Так же, как альтернатива, вы можете добавить в свой компонент:

public status$: ReplaySubject<string> = new ReplaySubject();

и затем использовать его вместо h3

{{status$ | async}}

В случае, если вам нужно передать HTML в зависимости от статусаВы можете создать компонент, который будет делать это в соответствии со статусом.

<status-viewer [status]="status$ | async"><status-viewer>