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

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

ng-template

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

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

loading...



 

Hello, Tom?


Jerry
 

作用域的Template

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

{
  {account}} - {
  {age}}





 

上面的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