Angular中ng-template和ng-container的应用

Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结。

ng-template

ng-template是一个Angular元素，它不会直接显示出来。在渲染视图之前，Angular会把它的内容替换为一个注释。ng-template是用来定义模板的，当定义好一个模板之后，可以用ng-container和ngTemplateOutlet指令来进行使用。

简单点来说，就是定义了一个模板片段，并且起了一个名字，在需要的时候可以通过名字来使用这个片段。

<!--定义模板，并不会在视图中显示-->
<ng-template #loading><div class="waiting-wrap"><div class="spinner">loading...</div></div>
</ng-template>

<!--使用模板，在视图中显示-->
<ng-container *ngTemplateOutlet="loading"></ng-container> 

<ng-template #myTemp><div>Hello, Tom?</div>
</ng-template>

<div class="container"><ng-container *ngTemplateOutlet="myTemp"></ng-container><div [ngTemplateOutlet]="myTemp">Jerry</div>
</div> 

作用域的Template

带作用域的Template，可以从当前作用域获得数据。

<ng-template #userTemp let-account="name" let-age="age"><p>{
  
  {account}} - {
  
  {age}}</p>
</ng-template>

<ng-container *ngTemplateOutlet="userTemp; context: userInfo">
</ng-container>

<!--
<ng-container [ngTemplateOutlet]="userTemp" [ngTemplateOutletContext]="userInfo"></ng-container>
--> 

上面的let-account=“name”，相当于定义了一个account变量，变量的值为 context.name。也就是下面的代码：

let account = context.name;
let age = context.age; 

import { AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { MsgComponent } from '../msg/msg.component';

@Component({selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.c