angular--ng-template&ngTemplateOutlet的用法

 1.ng-template指令介绍--<ng-template></ng-template>

 ng-template表示一个模板，标签内是模板的内容，模板的内容可以与其它模板一起组成组件模板。

在Angular中，我们用过的许多结构指令都使用了ng-template，如ngIf、ngFor和ngSwitch。

ngTemplate中的内容可以自定义，并且一开始不会被渲染，除非满足一定的条件。我们必须使用结构指令去渲染它。

<ng-template>

    <button class="tab-button" (click)="login()">{{loginText}}</button>

    <button class="tab-button" (click)="signUp()">{{signUpText}}</button>

</ng-template>

上面代码在页面中并没有被渲染。

2.ng-template使用

2.1ng-template与ngIf

我们见的最多的可能是与ngIf一块使用，当if条件不成立时，将显示else中的内容。下面代码中else语句被指向了一个名为loading的模板，通过模板引用#loading的方式。

<div class="lessons-list" *ngIf="lessons else loading">
  ... 
</div>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

其实，ngIf指令也是ng-template的包装。

<ng-template [ngIf]="lessons" [ngIfElse]="loading">
   <div class="lessons-list">
     ... 
   </div>
</ng-template>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

[ngIf]和[ngIfElse]为模板输入变量。

2.2同一元素使用多个结构指令

<div class="lesson" *ngIf="lessons" 
       *ngFor="let lesson of lessons">
    <div class="lesson-detail">
        {{lesson | json}}
    </div>
</div>  

这样会报错：

Uncaught Error: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute 
named 'template' or prefixed with *

这意味着不能在同一个元素使用两个或多个结构指令。

<div *ngIf="lessons">
    <div class="lesson" *ngFor="let lesson of lessons">
        <div class="lesson-detail">
            {{lesson | json}}
        </div>
    </div>
</div>

可以在ngFor指令的外面包一层ngIf指令，这样就解决了上面的问题；但这样会额外创一个一个元素。因此，我们可以使用ng-container指令。

<ng-container *ngIf="lessons">
    <div class="lesson" *ngFor="let lesson of lessons">
        <div class="lesson-detail">
            {{lesson | json}}
        </div>
    </div>
</ng-container>

ng-container的一种用途是，给我们提供一个附加指令的元素而不会创建一个额外的元素。另一种用途是，配合ngTemplateOutlet使用。

3.ngTemplateOutlet使用介绍

ngTemplateOutlet也是一个指令，它使用模板引用和上下文对象作为参数动态实例化模板。作为一个结构指令，我们可以使用它在DOM的各个部分插入模板(由ng-template创建)。

 <ng-container *ngTemplateOutlet="loading">This text is not displayed</ng-container> 

ngTemplateOutlet包含的任何内部内容都不会被渲染；我们可以根据需要向页面添加任意数量的ngTemplateOutlet标签，并实例化许多不同的模板。

 <div *ngTemplateOutlet="loading"></div>  

上面代码中的div并不会被渲染，因为angular将上述内容替换成ng-template语法,

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

3.1传递数据给ngTemplateOutlet

我们可以通过ngTemplateOutletContext属性传递数据

<ng-template let-value="value" #messageTemplate>  
    <p>Value Received from the Parent is  {{value}}</p>
</ng-template>

<ng-container [ngTemplateOutlet]="messageTemplate" 
       [ngTemplateOutletContext] ="{value:'1000'}">
</ng-container> 

当然，也可以使用简写属性--context:

 <ng-container *ngTemplateOutlet="messageTemplate; context:{value:100}"></ng-container>  传递多个数据：

<ng-template let-name="nameVar" let-message="messageVar" #template>  
  <p>Dear {{name}} , {{message}} </p>
</ng-template>
 
 
<ng-container [ngTemplateOutlet]="template" 
          [ngTemplateOutletContext] ="{nameVar:'Guest',messageVar:'Welcome to our site'}">
</ng-container> 

传递对象：

 
<ng-template let-person="person"  #template>  
  <p>Dear {{person.name}} , {{person.message}} </p>
</ng-template>
 
 
<ng-container [ngTemplateOutlet]="template" 
           [ngTemplateOutletContext] ="{ person:{name:'Guest',message:'Welcome to our site'} }">
</ng-container> 

使用$implicit:

可以在上下文对象中使用$implicit将其值设置为所有局部变量的默认值。

<ng-template let-name let-message="message" #template3>  
  <p>Dear {{name}} , {{message}} </p>
</ng-template>
 
<ng-container [ngTemplateOutlet]="templates" 
              [ngTemplateOutletContext] ="{$implicit:'Guest',message:'Welcome to our site'}">
</ng-container> 

上面代码中，我们没有给 let-name 赋值，因此它从$implicit中获取值。

3.2模板上下文

每个模板可以定义自己的输入变量；实际上，每个模板都关联了一个上下文对象，其中包含所有特定于模板的输入变量。

@Component({
  selector: 'app-root',
  template: `      
<ng-template #estimateTemplate let-lessonsCounter="estimate">
    <div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>
`})
export class AppComponent {

    totalEstimate = 10;
    ctx = {estimate: this.totalEstimate};
  
}

说明：lessonsCounter为输入变量，通过ng-template属性使用前缀 let- 定义的

lessonsCounter对ng-template模板里面的内容是可见的，对模板外是不可见的。

lessonsCounter的值是由 estimate 决定的，故context 对象必须有一个estimate 的属性。

3.3 模板引用

我们可以使用ViewChild装饰器将模板直接注入到组件中：

@Component({
  selector: 'app-root',
  template: `      
      <ng-template #defaultTabButtons>
          <button class="tab-button" (click)="login()">
            {{loginText}}
          </button>
          <button class="tab-button" (click)="signUp()">
            {{signUpText}}
          </button>
      </ng-template>
`})
export class AppComponent implements OnInit {

    @ViewChild('defaultTabButtons')
    private defaultTabButtonsTpl: TemplateRef<any>;

    ngOnInit() {
        console.log(this.defaultTabButtonsTpl); //undefined; ngAfterViewInit()才会打印
    }

}

模板可以被注入，就像DOM元素和组件一样，通过将模板引用传给ViewChild装饰器。

我们还可以将模板作为一个输入变量：

@Component({
  selector: 'app-root',
  template: `      
<ng-template #customTabButtons>
    <div class="custom-class">
        <button class="tab-button" (click)="login()">
          {{loginText}}
        </button>
        <button class="tab-button" (click)="signUp()">
          {{signUpText}}
        </button>
    </div>
</ng-template>
<tab-container [headerTemplate]="customTabButtons"></tab-container>      
`})
export class AppComponent implements OnInit {

}

@Component({
    selector: 'tab-container',
    template: `
    
<ng-template #defaultTabButtons>
    
    <div class="default-tab-buttons">
        ...
    </div>
    
</ng-template>
<ng-container 
  *ngTemplateOutlet="headerTemplate ? headerTemplate: defaultTabButtons">
    
</ng-container>
... rest of tab container component ...
`})
export class TabContainerComponent {
    @Input()
    headerTemplate: TemplateRef<any>;
}

当我们传入自定义模板时(#customTabButtons)，就显示这个自定义模板；否则，显示默认的模板。

3.4 ngTemplateOutlet、ng-template 与内容投影

父组件使用内容投影传递一个模板给子组件：

import { Component, TemplateRef, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 
@Component({
  selector: 'parent1',
  template: `
  
  <h1>Parent Component </h1>
 
  <child1> 
    <p>This Template is Projected to the Child</p>
  </child1>
  `
})
export class Parent1Component {
}

子组件：

import { Component, TemplateRef, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 
@Component({
  selector: 'child1',
  template: `
 
  <h1>Child Component </h1>
 
  <ng-template #parentTemplate>
    <ng-content></ng-content>
  </ng-template>
 
  <ng-template [ngTemplateOutlet]="parentTemplate"></ng-template>
 
  `
})
export class Child1Component {
}
 

4.总结

ng-template、ng-container和ngTemplateOutlet指令结合使用，可以创建高度动态和可定制的组件。