Question

此问题与ngTemplateOutlet with dynamic value

有关

按照此示例，有一个@ViewChild('one') one:TemplateRef<any>; 对于每个模板。

我正在做一个本质上是电子书的应用程序。目前，每个页面都有一个<ng-template #pagexx>。是否有办法避免每个页面都有@ViewChild？对于大量页面来说，这将变得相当繁琐。

寻找表达方式可以从component.ts传入表达式，并将表达式计算为page6或page7 ...

谢谢你的帮助。

Answer 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 example

Plunker example with ViewChildren

ngtemplate模板选择的动态值

1 个答案: