angular 之 ng-template、ng-container、ng-content区别及使用

ng-template

定义一个模板-默认不渲染

列表渲染例子-效果图

html

<div *ngFor="let person of persons;">
  <div>姓名: {{person.name}}</div>
  <!-- 通过 ngTemplateOutlet 指令输出template的内容 context 可以给模板传递数据, $implicit 为默认的数据 -->
  <!-- ng-container 进行占位且不渲染具体的标签 -->
  <ng-container *ngTemplateOutlet="money; context: { $implicit: person, money: person.money }"></ng-container>
</div>

<!-- #money 定义template的模板变量 let-item是声明默认数据为item变量 let-m="money" 是声明m变量，值为money字段 -->
<ng-template #money let-item let-m="money">
  <div>{{ item.name }}每天收入 {{ m }} 元</div>
</ng-template>

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ng-template',
  templateUrl: './ng-template.component.html',
  styleUrls: ['./ng-template.component.scss']
})
export class NgTemplateComponent implements OnInit {

  persons: { name: string; money: number; }[] = [
    { name: '杰克', money: 120 },
    { name: '李莉', money: 210 },
    { name: '张三', money: 170 },
  ];
  constructor(){ }
  ngOnInit(): void { }
}

ng-container

• 可以在上面使用指令，但本身不会渲染为实际的DOM。
• 可以当做一个占位替换符，当多个平行元素具有相同的渲染条件时也可以当做包括这些平行元素的容器。
• 可以配合进行条件内容投影

ng-content

• <ng-content> 元素是一个占位符，它不会创建真正的 DOM 元素。<ng-content> 的那些自定义属性将被忽略。
• 内容投影-把组件标签内部的模板映射到组件中特有的位置。跟vue的插槽，react的children类似

eg: 我们定义了一个通用UI组件，其中某一部分需要根据使用的情况进行渲染不同的内容，可以使用这个来进行渲染

单内容投影

• 在组件模板中，添加 <ng-content> 元素，让你希望投影的内容出现在其中。

使用场景

<!-- 第一种场景 -->
<app-form-unit>
  <div>this is first message</div>
</app-form-unit>

<!-- 第二种场景 -->
<app-form-unit>
  <div>this is second message</div>
</app-form-unit>

app-form-unit 组件

<div style="width: 200px;border: 1px solid #dcdcdc;padding: 10px;">
  <h3>这里是标题呀</h3>
  <div>这里是副标题哦</div>
  <div class="right-content">
    <h5>接下来可能有所不同呢</h5>
    <ng-content></ng-content>
  </div>
</div>

效果图

多内容投影

• 将 select 属性添加到 <ng-content> 元素。 Angular 使用的选择器支持标签名、属性、CSS 类和 :not 伪类的任意组合。
• 如果你的组件包含不带 select 属性的 <ng-content> 元素，则该实例将接收所有与其他 <ng-content> 元素都不匹配的投影组件。

使用场景

<app-form-unit>
  <div>this is default01</div>
  <div class="header">this is header</div>
  <div>this is default02</div>
  <div body>this is body</div>
  <div>this is default03</div>
  <footer>this is footer</footer>
  <div>this is default04</div>
</app-form-unit>

app-form-unit 组件

<div>
  <h3>Herder Title</h3>
  <ng-content select=".header"></ng-content>
  <h3>Body Title</h3>
  <ng-content select="[body]"></ng-content>
  <h3>Default Title</h3>
  <ng-content></ng-content>
  <h3>Footer Title</h3>
  <ng-content select="footer"></ng-content>
</div>

效果图

有条件的内容投影

• 如果你的组件需要有条件地渲染内容或多次渲染内容，则应配置该组件以接受一个 <ng-template> 元素，其中包含要有条件渲染的内容。
• 在这种情况下，不建议使用 <ng-content> 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 <ng-content> 元素或该 <ng-content> 元素位于 ngIf 语句的内部，该内容也总会被初始化。