简介

单一职责原则，说白了就是应用程序的每个部分都只干一件事，别越界。把这个原则用好了，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 的威力——它让我们在不破坏组件内部逻辑的前提下，实现了极致的灵活性和可复用性。