Question

我编写了一个简单的代码来演示ngTemplate

   <div> <ng-container [ngTemplateOutlet] ="template1"> </ng-container></div>

这是模板

 <ng-template #template1> This is 1st template </ng-template>
 <ng-template #template2>This is 2nd template </ng-template>

它按预期工作，但我的问题是我无法将动态值传递给[ngTemplateOutlet]

我想实现类似的目标

<div> <ng-container [ngTemplateOutlet] ="selectTemplate"></ng-container> </div>

选择template1或template2。

每当我传递一些我在我的打字稿文件中定义的动态值时，它给出的是错误

ERROR TypeError: templateRef.createEmbeddedView is not a function

我的打字稿文件包含此代码

if(some condition) {
     this.selectTemplate = "template1";
} else {
     this.selectTemplate = "template2";
}

Answer 1

在第一个示例中，您将ngTemplateOutlet绑定到表达式template1的值，这是第一个ngTemplate元素。到目前为止一切都很好。

在您的第二个示例中，您将ngTemplateOutlet绑定到表达式selectTemplate的值，即不是模板元素 - 您已经把它设置为一个字符串！

要解决此问题，首先需要使用ViewChild注释将模板引用添加为组件作为字段：

@ViewChild('template1') template1;
@ViewChild('template2') template2;

然后设置selectTemplate以引用元素本身而不是其名称：

if (some condition) {
     this.selectTemplate = this.template1;
}
else {
     this.selectTemplate = this.template2;
}

请注意，在组件的视图初始化之前，不会设置ViewChild变量 - 您可以使用ngViewAfterInit挂钩等待它发生。

Answer 2

更新Angular 5

ngOutletContext已重命名为ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

<强>原始

您可以传递上下文

<ng-container [ngTemplateOutlet]="template1; context: {foo: 'foo', bar: 'bar', $implicit: 'implit' }"

在模板中，您可以像

一样使用它

<ng-template #template1 let-foo1="foo" let-foo2="bar" let-item>
  This is 1st template
  <div>foo1: {{foo1}}</div> 
  <div>foo2: {{foo2}}</div>      
  <div>foo1: {{item}}</div>    
 </ng-template>

我希望我使用的名字不会太混乱。我试图区分

将值传递给上下文的名称
模板中使用的名称
$ implicit，在模板变量定义中不需要="somename"（let-item）

Angular4模板

2 个答案: