• 1、ng-content

作用：内容投影，将组建内部写的组件或者html覆盖父组件的ng-content

使用场景：编写组件中需要融入其他组件（类似vue slot）

例：app-d3chart中需要加入app-new-small-card组件，app-new-small-card需要加入app-small-panel组件，只需要在app-d3chart中加<ng-content></ng-content>标签即可。

    <app-d3chart [height]="633" [type]="'world'" [cardId]="'card_dashboard_map'"><app-new-small-card [totalHeight]="600"><app-small-panel #smallPanel [timeer]="timeer"></app-small-panel></app-new-small-card></app-d3chart>

ng-content有个select属性，可以做一些判断，满足条件再显示要填充的外部内容，支持 CSS 选择器（my-element，.my-class，[my-attribute]，...）来匹配你想要的内容。如果不设置就全部接受。

例：

    /*父组件*/<app-parent><app-child class="red"></app-child><app-child name="child"></app-child></app-parent>/*子组件 对号入座*/<div style="background: cyan"><ng-content select="[name=child]"></ng-content></div><div style="background: pink"><ng-content select=".red"></ng-content></div>

ng-content有@ContentChild装饰器，可以用来调用投影内容了，和@ViewChild非常类似。异同点如下：

相同点

1. 都是属性装饰器
2. 都有对应的复数形式装饰器：ContentChildren、ViewChildren
3. 都支持 Type

不同点

1. ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素
2. ViewChild 用来从模板视图中获取匹配的元素
3. 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素
4. 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素

参考：https://www.cnblogs.com/yw0219/p/7789211.html

• 2、ng-template

作用：用来渲染 HTML，它永远不会直接显示出来。 事实上，在渲染视图之前，Angular 会把 <ng-template>及其内容替换为一个注释。一般和判断指令一起使用。符合条件才渲染。

不会渲染

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

会渲染 

<div class="lessons-list" *ngIf="lessons else loading">... 
</div><ng-template #loading><div>Loading...</div>
</ng-template>

使用场景：

1、模板引用，使用ViewChild 装饰器注入

例：defaultTabButtons这块可以

@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);}
}

2、通过 @Input 导入部分模板（组合模式），与其他模板组合在一起，以形成最终的组件模板。一般和ngTemplateOutlet（实例化模板）一起使用，用于动态填充或插入相应的内容。

例：如果父组件nzTitle配置的是字符串，就显示字符串内容，如果不是，通过ngTemplateOutlet指令动态去创建。

    <ng-template #titleTemplate><ng-template [ngTemplateOutlet]="nzTitle"></ng-template></ng-template><div class="ant-card-head" *ngIf="nzTitle||nzExtra||tab"><div class="ant-card-head-wrapper"><div class="ant-card-head-title" *ngIf="nzTitle"><ng-container *ngIf="isTitleString; else titleTemplate">{{ nzTitle }}</ng-container></div></div></div>

     <nz-card [nzBordered]="false" [nzTitle]="titleRiskTrendTop10"><ng-template #titleRiskTrendTop10>风险趋势排行TOP10</ng-template><app-risk-trend-top10 #riskTrendTop10 [timeer]="timeer"></app-risk-trend-top10></nz-card>

3、动态加载

例如广告条场景，先使用一个名叫 AdDirective 的辅助指令来在模板中标记出有效的插入点。

import { Directive, ViewContainerRef } from '@angular/core';@Directive({selector: '[ad-host]',
})
export class AdDirective {constructor(public viewContainerRef: ViewContainerRef) { }
}

加载到模块组件位置，选择器ad-host是AdDirective服务的，ad-host不用带尖括号。

        template: `<div class="ad-banner"><h3>Advertisements</h3><ng-template ad-host></ng-template></div>

4、和结构型指令一起使用

例：下面俩种写法是一样的，星号是一个用来简化更复杂语法的“语法糖”。 从内部实现来说，Angular 把 *ngIf 属性 翻译成一个 <ng-template> 元素 并用它来包裹宿主元素。

• *ngIf 指令被移到了 <ng-template> 元素上。在那里它变成了一个属性绑定 [ngIf]。

• <div> 上的其余部分，包括它的 class 属性在内，移到了内部的 <ng-template> 元素上。

<div *ngIf="hero" class="name">{{hero.name}}</div>
<ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div>
</ng-template>

5、结构型指令。

例：这个例子结构型指令会从 Angular 生成的 <ng-template> 元素中创建一个内嵌的视图，并把这个视图插入到一个视图容器中，紧挨着本指令原来的宿主元素 <p>（译注：注意不是子节点，而是兄弟节点）。

你可以使用TemplateRef取得 <ng-template> 的内容，并通过ViewContainerRef来访问这个视图容器。

你可以把它们都注入到指令的构造函数中，作为该类的私有属性。

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';/*** Add the template content to the DOM unless the condition is true.*/
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {private hasView = false;constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }@Input() set appUnless(condition: boolean) {if (!condition && !this.hasView) {this.viewContainer.createEmbeddedView(this.templateRef);this.hasView = true;} else if (condition && this.hasView) {this.viewContainer.clear();this.hasView = false;}}
}<p *appUnless="condition" class="unless a">(A) This paragraph is displayed because the condition is false.
</p><p *appUnless="!condition" class="unless b">(B) Although the condition is true,this paragraph is displayed because appUnless is set to false.
</p>

参考：https://www.angular.cn/guide/structural-directives

• 3、ng-container

作用：是一个分组元素，把一些兄弟元素归为一组，但它不会污染样式或元素布局。因为 Angular 不会把它渲染到 DOM 中。

使用场景：字符串拼接时，需要满足条件才显示的部分，如果用其他标签包裹起来进行判断，可能会有样式问题。

例1：字符串拼接时，如果span标签有样式，就会导致这一行字体不一样

<p>I turned the corner<span *ngIf="hero">and saw {{hero.name}}. I waved</span>and continued on my way.
</p>

用ng-container就不会有这种顾虑

<p>I turned the corner<ng-container *ngIf="hero">and saw {{hero.name}}. I waved</ng-container>and continued on my way.
</p>

例2：select根据条件排除选择框中的某个 <option>。浏览器不会显示 <span> 中的 <option>。

<div>Pick your favorite hero(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero"><span *ngFor="let h of heroes"><span *ngIf="showSad || h.emotion !== 'sad'"><option [ngValue]="h">{{h.name}} ({{h.emotion}})</option></span></span>
</select>

使用ng-container可正常显示

<div>Pick your favorite hero(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero"><ng-container *ngFor="let h of heroes"><ng-container *ngIf="showSad || h.emotion !== 'sad'"><option [ngValue]="h">{{h.name}} ({{h.emotion}})</option></ng-container></ng-container>
</select>