用于模板选择的 ng 模板动态值

Question

此问题与

相关

按照这个例子，有一个@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

用于模板选择的 ng 模板动态值

ngtemplate dynamic value for template selection

ng-template

angular