如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件

简介

单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 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,它根据其 mode'card''list' 格式中显示 items

它由一个 card-or-list-view.component.ts 文件组成:

typescript 复制代码
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 模板:

html 复制代码
<ng-container [ngSwitch]="mode">
  <ng-container *ngSwitchCase="'card'">
    <div *ngFor="let item of items">
      <h1>{{item.header}}</h1>
      <p>{{item.content}}</p>
    </div>
  </ng-container>
  <ul *ngSwitchCase="'list'">
    <li *ngFor="let item of items">
      {{item.header}}: {{item.content}}
    </li>
  </ul>
</ng-container>

这是该组件的使用示例:

typescript 复制代码
import { Component } from '@angular/core';

@Component({
  template: `
    <card-or-list-view
        [items]="items"
        [mode]="mode">
    </card-or-list-view>
`
})
export class UsageExample {
  mode = 'list';
  items = [
    {
      header: 'Creating Reuseable Components with NgTemplateOutlet in Angular',
      content: 'The single responsibility principle...'
    } // ... more items
  ];
}

该组件没有单一职责,也不够灵活。它需要跟踪其 mode 并知道如何在 cardlist 视图中显示 items。它只能显示具有 headercontentitems

让我们通过使用模板将组件分解为单独的视图来改变这一点。

步骤 2 -- 理解 ng-templateNgTemplateOutlet

为了让 CardOrListViewComponent 能够显示任何类型的 items,我们需要告诉它如何显示它们。我们可以通过给它一个模板来实现这一点,它可以用来生成 items

模板将使用 <ng-template> 和从 TemplateRefs 创建的 EmbeddedViewRefsEmbeddedViewRefs 代表具有自己上下文的 Angular 视图,是最小的基本构建块。

Angular 提供了一种使用这个从模板生成视图的概念的方法,即使用 NgTemplateOutlet

NgTemplateOutlet 是一个指令,它接受一个 TemplateRef 和上下文,并使用提供的上下文生成一个 EmbeddedViewRef。可以通过 let-{``{templateVariableName}}="contextProperty" 属性在模板上访问上下文,以创建模板可以使用的变量。如果未提供上下文属性名称,它将选择 $implicit 属性。

这是一个示例:

typescript 复制代码
import { Component } from '@angular/core';

@Component({
  template: `
    <ng-container *ngTemplateOutlet="templateRef; context: exampleContext"></ng-container>
    <ng-template #templateRef let-default let-other="aContextProperty">
      <div>
        $implicit = '{{default}}'
        aContextProperty = '{{other}}'
      </div>
    </ng-template>
`
})
export class NgTemplateOutletExample {
  exampleContext = {
    $implicit: 'default context property when none specified',
    aContextProperty: 'a context property'
  };
}

这是示例的输出:

html 复制代码
<div>
  $implicit = 'default context property when none specified'
  aContextProperty = 'a context property'
</div>

defaultother 变量由 let-defaultlet-other="aContextProperty" 属性提供。

第三步 -- 重构 CardOrListViewComponent

为了使 CardOrListViewComponent 更加灵活,并允许它显示任何类型的 items,我们将创建两个结构型指令来作为模板。这些模板将分别用于卡片和列表项。

这是 card-item.directive.ts

typescript 复制代码
import { Directive } from '@angular/core';

@Directive({
  selector: '[cardItem]'
})
export class CardItemDirective {

  constructor() { }

}

这是 list-item.directive.ts

typescript 复制代码
import { Directive } from '@angular/core';

@Directive({
  selector: '[listItem]'
})
export class ListItemDirective {

  constructor() { }

}

CardOrListViewComponent 将导入 CardItemDirectiveListItemDirective

typescript 复制代码
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;

}

这段代码将读取我们的结构型指令作为 TemplateRefs

html 复制代码
<ng-container [ngSwitch]="mode">
  <ng-container *ngSwitchCase="'card'">
    <ng-container *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="cardItemTemplate"></ng-container>
    </ng-container>
  </ng-container>
  <ul *ngSwitchCase="'list'">
    <li *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="listItemTemplate"></ng-container>
    </li>
  </ul>
</ng-container>

这是该组件的使用示例:

typescript 复制代码
import { Component } from '@angular/core';

@Component({
  template: `
    <card-or-list-view
        [items]="items"
        [mode]="mode">
      <div *cardItem>
        静态卡片模板
      </div>
      <li *listItem>
        静态列表模板
      </li>
    </card-or-list-view>
`
})
export class UsageExample {
  mode = 'list';
  items = [
    {
      header: '使用 NgTemplateOutlet 在 Angular 中创建可重用组件',
      content: '单一职责原则...'
    } // ... 更多项
  ];
}

通过这些更改,CardOrListViewComponent 现在可以根据提供的模板以卡片或列表形式显示任何类型的项。目前,模板是静态的。

我们需要做的最后一件事是通过为它们提供上下文来使模板变得动态:

html 复制代码
<ng-container [ngSwitch]="mode">
  <ng-container *ngSwitchCase="'card'">
    <ng-container *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="cardItemTemplate; context: {$implicit: item}"></ng-container>
    </ng-container>
  </ng-container>
  <ul *ngSwitchCase="'list'">
    <li *ngFor="let item of items">
      <ng-container *ngTemplateOutlet="listItemTemplate; context: {$implicit: item}"></ng-container>
    </li>
  </ul>
</ng-container>

这是该组件的使用示例:

typescript 复制代码
import { Component } from '@angular/core';

@Component({
  template: `
    <card-or-list-view
        [items]="items"
        [mode]="mode">
      <div *cardItem="let item">
        <h1>{{item.header}}</h1>
        <p>{{item.content}}</p>
      </div>
      <li *listItem="let item">
        {{item.header}}: {{item.content}}
      </li>
    </card-or-list-view>
`
})
export class UsageExample {
  mode = 'list';
  items = [
    {
      header: '使用 NgTemplateOutlet 在 Angular 中创建可重用组件',
      content: '单一职责原则...'
    } // ... 更多项
  ];
}

有趣的是,我们使用了星号前缀和微语法来实现语法糖。这与以下代码是相同的:

html 复制代码
<ng-template cardItem let-item>
  <div>
    <h1>{{item.header}}</h1>
    <p>{{item.content}}</p>
  </div>
</ng-template>

就是这样!我们拥有了原始功能,但现在可以通过修改模板来显示任何我们想要的内容,而 CardOrListViewComponent 的责任更少了。我们可以向项上下文中添加更多内容,比如类似于 ngForfirstlast,或者显示完全不同类型的 items

结论

在本文中,您将一个现有的组件重写,以使用 NgTemplateOutlet

如果您想了解更多关于 Angular 的内容,请查看我们的 Angular 专题页面,了解相关练习和编程项目。

相关推荐
阿伟来咯~15 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端20 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱23 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai32 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨33 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js