Этот вопрос связан с ngTemplateOutlet с динамическим значением

Следуя этому примеру, есть @ViewChild('one') one:TemplateRef<any>; для каждого шаблона.

Я делаю приложение, которое по сути является электронной книгой. В настоящее время у меня есть <ng-template #pagexx> для каждой страницы. Есть ли способ избежать использования @ViewChild для каждой страницы? Это будет довольно утомительно для большого набора страниц.

Ищете способ передать это выражение из component.ts и получить результат выражения page6 или page7 ...

Спасибо за любую помощь.

2
phil magnuson 11 Мар 2018 в 18:21

1 ответ

Лучший ответ

Переменная шаблона - это не строка, это ссылка на элемент или компонент. Вы можете получить его, например, используя @ViewChild()

@Component({
  selector: 'my-app',
  template: `
      <h3>templatePage = {{page}}</h3>

      <button (click)="page = page == page1 ? page2 : page1">toggle</button>

       <ng-container [ngTemplateOutlet]="page1"></ng-container>

       <ng-container [ngTemplateOutlet]="page2"></ng-container>

       <ng-container [ngTemplateOutlet]="page"></ng-container>

      <ng-template #tPage1>page 1</ng-template>
      <ng-template #tPage2>page 2</ng-template>

  `,
})
export class App {
  @ViewChild('tPage1') page1:TemplateRef;
  @ViewChild('tPage2') page2:TemplateRef;
  page:TemplateRef;

  name:string;
  templatePage:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

Пример Plunker

Пример Plunker с ViewChildren

1
Günter Zöchbauer 13 Мар 2018 в 15:43