angular - 用于模板选择的 ngtemplate 动态值

Question

这个问题与具有动态值的 ngTemplateOutlet有关

在此示例之后，@ViewChild('one') one:TemplateRef<any>; 每个模板都有一个。

我正在做一个本质上是电子书的应用程序。目前我<ng-template #pagexx>每页都有一个。有什么方法可以避免每个@ViewChild页面都有？对于大量页面，这将变得非常乏味。

寻找一种可以从 from 传入component.ts表达式并使表达式计算为page6or 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 示例

带有 ViewChildren 的 Plunker 示例