简介
单一职责原则，说白了就是应用程序的每个部分都只干一件事，别越界。把这个原则用好了，Angular 代码不仅更容易测试，开发和维护也会顺手很多。
在 Angular 中，与其死磕地去写一个“什么都管”的特定组件，不如借助 NgTemplateOutlet 来让组件变得灵活。这样一来，我们不用改动组件本身的代码，就能轻松适配各种不同的使用场景。
这篇教程的目的很明确：带着你手把手地把一个现有的僵化组件重写一遍，让它真正用上 NgTemplateOutlet。
先决条件
开始之前，先确认一下你手里有没有这几样东西：
- 本地安装了 Node.js（具体怎么装，可以参照《如何安装 Node.js 并创建本地开发环境》那篇文章）。
- 对 Angular 项目的基本搭建方式有一定了解。
为了确保接下来的演示能顺畅跑起来，本次操作是在 Node v16.6.2、npm v7.20.6 和 @angular/core v12.2.0 的环境下验证通过的。
步骤 1 – 先看看“原版”的 CardOrListViewComponent
假设我们现在有一个 CardOrListViewComponent，它的功能是接收一个 items 数组，然后根据传入的 mode 参数，把这些数据以“卡片”或“列表”的形式展示出来。
它的逻辑代码写在 card-or-list-view.component.ts 里：
import {
Component,
Input
} from '@angular/core';
@Component({
selector: 'card-or-list-view',
templateUrl: './card-or-list-view.component.html'
})
export class CardOrListViewComponent {
@Input() items: {
header: string,
content: string
}[] = [];
@Input() mode: string = 'card';
}
对应的模板文件 card-or-list-view.component.html 长这样：
{{item.header}}
{{item.content}}
- {{item.header}}: {{item.content}}
用起来就像这样：
import { Component } from '@angular/core';
@Component({
template: `
`
})
export class UsageExample {
mode = 'list';
items = [
{
header: 'Creating Reuseable Components with NgTemplateOutlet in Angular',
content: 'The single responsibility principle...'
} // ... more items
];
}
说实话，这个组件有点“大包大揽”了。它不仅要自己判断当前是卡片模式还是列表模式，还得亲自去渲染每一个 items，而且只认得 header 和 content 这两个字段。一旦数据结构变了，它就得跟着改，非常不灵活。
接下来，我们就用“模板”的思路，把这个组件拆解开，让它变得更纯粹。
步骤 2 – 理解 ng-template 和 NgTemplateOutlet
为了让 CardOrListViewComponent 能处理任何格式的输入数据，我们得教它如何展示这些数据。最直接的办法，就是把“渲染方式”的决定权交出去——也就是通过提供一个模板给它。
这个模板会用 TemplateRefs 和由此生成的 EmbeddedViewRefs。你可以把 EmbeddedViewRefs 理解为拥有独立上下文的 Angular 视图，它是最小也是最基本的构建单元。
Angular 提供了 NgTemplateOutlet 这个指令，帮我们优雅地完成这件事。
NgTemplateOutlet 的核心逻辑很简单：它接收一个 TemplateRef 和一个上下文对象，然后用这个上下文去生成一个具体的 EmbeddedViewRef。在模板内部，通过 let-{{templateVariableName}}="contextProperty" 这样的语法，就能把上下文中的数据映射成模板变量。如果没指定具体的上下文属性名，那么默认接收的是 $implicit 这个隐式属性。
下面是一个直观的例子：
import { Component } from '@angular/core';
@Component({
template: `
$implicit = '{{default}}'
aContextProperty = '{{other}}'
`
})
export class NgTemplateOutletExample {
exampleContext = {
$implicit: 'default context property when none specified',
aContextProperty: 'a context property'
};
}
最终渲染出来的效果是：
$implicit = 'default context property when none specified' aContextProperty = 'a context property'
这里的 default 和 other 这两个变量，分别是通过 let-default 和 let-other="aContextProperty" 从上下文中提取出来的。
步骤 3 – 重构 CardOrListViewComponent
为了让 CardOrListViewComponent 真正变得通用，不再局限于特定的数据结构，我们需要创建两个结构型指令，分别作为卡片和列表项的模板“占位符”。
首先是 card-item.directive.ts：
import { Directive } from '@angular/core';
@Directive({
selector: '[cardItem]'
})
export class CardItemDirective {
constructor() { }
}
然后是 list-item.directive.ts：
import { Directive } from '@angular/core';
@Directive({
selector: '[listItem]'
})
export class ListItemDirective {
constructor() { }
}
接下来，改造 CardOrListViewComponent，让它导入这两个指令，并通过 @ContentChild 获取它们对应的 TemplateRef：
import {
Component,
ContentChild,
Input,
TemplateRef
} from '@angular/core';
import { CardItemDirective } from './card-item.directive';
import { ListItemDirective } from './list-item.directive';
@Component({
selector: 'card-or-list-view',
templateUrl: './card-or-list-view.component.html'
})
export class CardOrListViewComponent {
@Input() items: {
header: string,
content: string
}[] = [];
@Input() mode: string = 'card';
@ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate: any;
@ContentChild(ListItemDirective, {read: TemplateRef}) listItemTemplate: any;
}
这段代码的关键在于：我们告诉 Angular，去读取被 CardItemDirective 和 ListItemDirective 标记的元素，并把它们当作 TemplateRef 拿出来用。
对应的模板也要做调整：
使用方式也跟着变了：
import { Component } from '@angular/core';
@Component({
template: `
静态卡片模板
静态列表模板
`
})
export class UsageExample {
mode = 'list';
items = [
{
header: '使用 NgTemplateOutlet 在 Angular 中创建可重用组件',
content: '单一职责原则...'
} // ... 更多项
];
}
经过这一轮改动，CardOrListViewComponent 已经能根据外部传入的模板，任意展示不同格式的卡片或列表了。不过，目前的模板还只是个“静态展示块”，没有和具体的 item 数据关联起来。
最后一步，就是给这些模板注入动态的上下文：
现在，外部使用的时候就能拿到数据了：
import { Component } from '@angular/core';
@Component({
template: `
{{item.header}}
{{item.content}}
{{item.header}}: {{item.content}}
`
})
export class UsageExample {
mode = 'list';
items = [
{
header: '使用 NgTemplateOutlet 在 Angular 中创建可重用组件',
content: '单一职责原则...'
} // ... 更多项
];
}
注意这里的 *cardItem="let item" 语法，它其实是 Angular 的微语法糖衣。拆开来看，它等价于下面这种写法：
{{item.header}}
{{item.content}}
结论
到这步，我们就大功告成了。原来的功能一点没少，但 CardOrListViewComponent 的职责已经大大减轻了。现在，你想让卡片显示什么，列表显示什么，完全由外部传入的模板说了算。哪怕以后数据结构变了，只要修改模板就行，组件本身根本不用动。
可以说，这就是 NgTemplateOutlet 的威力——它让我们在不破坏组件内部逻辑的前提下，实现了极致的灵活性和可复用性。
