Question

我试图在视图中动态选择模板，只需使用Angular 2的传统“＃”字符引用它们。在我的项目中，我处理错误并将其显示给用户，我有一个对话框组件，应该动态注入其内容html，这就是我使用模板的原因。

我读了一些文章，这些文章显示了一种方法，当我已经知道模板引用的名称时，我不知道引用的名称，我在运行时得到了名称。我特别遵循了本指南：https://www.bennadel.com/blog/3101-experimenting-with-dynamic-template-rendering-in-angular-2-rc-1.htm

所以目前我的对话框组件有以下视图：

<template #err_1 let-property1="p1" let-property2="p2">
property1: {{p1}}
property2: {{p2}}

</template>

<template #err_2 let-property1="p1" let-property2="p2">
<p *ngIf="p1">{{p1}}</p>
property2: {{p2}}
</template>

<!--The code for the template directive i took from the guide in the link above-->
<tem [render]="templateRef"
     [context]="context">
</tem>

在我的对话框中，我有以下代码：

@Component({
  selector: 'error-dialog',
  queries: {
    templateRef: new ViewChild("err_1")
  },
  templateUrl: './dialog.html'
})
...

“TemplateRendererDirective”指令源我从上面的链接中获取了他们的指南。注意让我困惑的是：templateRef基本上得到一个对象：“ViewChild”即使指令最终得到了TemplateRef实例，这怎么可能呢？

所以，只有当我知道我要渲染哪个错误模板时，例如：“err_1”我只是事先在dialog.ts中引用它，但事实并非如此，我想动态告诉我想渲染“err_1”，“ err_2“etc ..并给出上下文（这是用数据填充该模板的对象 - 示例中的p1，p2，也是动态的）

有可能吗？

Answer 1

正如我在评论中提到的，您可以尝试使用@ViewChildren来完成它。但我使用附加指令TemplateNameDirective来操纵模板name。

以下是它的外观：

@Directive({
  'selector': 'template[name]'
})
export class TemplateNameDirective {
  @Input() name: string;
  constructor(public templateRef: TemplateRef<any>) {}
}

@Component({
  selector: 'error-dialog',
  template: `
    <template name="err_1" let-item>
      property1: {{item.p1}}
      property2: {{item.p2}}
    </template>

    <template name="err_2" let-item>
      <p *ngIf="item.p1">{{item.p1}}</p>
      property2: {{item.p2}}
    </template>

    <!-- 
       I use ngTemplateOutlet directive 
       https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html 
    -->
    <template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{ $implicit: context }">
    </template>
  `
})
export class ErrorDialogComponent {
  @ViewChildren(TemplateNameDirective) children: QueryList<TemplateNameDirective>;

  templateRef: TemplateRef<any>;
  context: any;

  public setContent(errTemplateName, context) {
    this.templateRef = this.children.toArray()
      .find(x => x.name === errTemplateName).templateRef; 
    this.context = context;
  }
}

家长观点：

<error-dialog #dialogRef></error-dialog>
<button (click)="dialogRef.setContent('err_1', { p1: 'test'})">Test err_1</button>
<button (click)="dialogRef.setContent('err_2', { p2: 'test2'})">Test err_2</button>

<强> Plunker Example

注意：我正在使用ngOutletContext属性传递$implicit对象。

使用上下文对象中隐含的键$将其值设置为默认值。

它的工作原理如下：

[ngOutletContext]="{ $implicit: row }"  ==> <template let-row>

[ngOutletContext]="{ item: row }"       ==> <template let-row="item">

如何在Angular 2中动态呈现模板？

1 个答案: