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

更新角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，它不需要模板变量定义(let-item)中的="somename"