Angular4模板

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在模板变量definintion（ let-item ）中不需要="somename"