做金融量化的网站,网页设计师发展趋势,商务网站建设期末作业,辽宁建设安装集团有限公司网站简介
单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。
在 Angular 中#xff0c;使用 NgTemplateOutlet 而不是创建特定组件#xff0c;可以使组件在不修改组件本身的情况下轻松修改为各种用例。
在本文…简介
单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 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 文件组成
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 模板
ng-container [ngSwitch]modeng-container *ngSwitchCasecarddiv *ngForlet item of itemsh1{{item.header}}/h1p{{item.content}}/p/div/ng-containerul *ngSwitchCaselistli *ngForlet item of items{{item.header}}: {{item.content}}/li/ul
/ng-container这是该组件的使用示例
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 并知道如何在 card 和 list 视图中显示 items。它只能显示具有 header 和 content 的 items。
让我们通过使用模板将组件分解为单独的视图来改变这一点。
步骤 2 – 理解 ng-template 和 NgTemplateOutlet
为了让 CardOrListViewComponent 能够显示任何类型的 items我们需要告诉它如何显示它们。我们可以通过给它一个模板来实现这一点它可以用来生成 items。
模板将使用 ng-template 和从 TemplateRefs 创建的 EmbeddedViewRefs。EmbeddedViewRefs 代表具有自己上下文的 Angular 视图是最小的基本构建块。
Angular 提供了一种使用这个从模板生成视图的概念的方法即使用 NgTemplateOutlet。
NgTemplateOutlet 是一个指令它接受一个 TemplateRef 和上下文并使用提供的上下文生成一个 EmbeddedViewRef。可以通过 let-{{templateVariableName}}contextProperty 属性在模板上访问上下文以创建模板可以使用的变量。如果未提供上下文属性名称它将选择 $implicit 属性。
这是一个示例
import { Component } from angular/core;Component({template: ng-container *ngTemplateOutlettemplateRef; context: exampleContext/ng-containerng-template #templateRef let-default let-otheraContextPropertydiv$implicit {{default}}aContextProperty {{other}}/div/ng-template})
export class NgTemplateOutletExample {exampleContext {$implicit: default context property when none specified,aContextProperty: a context property};
}这是示例的输出
div$implicit default context property when none specifiedaContextProperty a context property
/divdefault 和 other 变量由 let-default 和 let-otheraContextProperty 属性提供。
第三步 – 重构 CardOrListViewComponent
为了使 CardOrListViewComponent 更加灵活并允许它显示任何类型的 items我们将创建两个结构型指令来作为模板。这些模板将分别用于卡片和列表项。
这是 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 将导入 CardItemDirective 和 ListItemDirective 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。 ng-container [ngSwitch]modeng-container *ngSwitchCasecardng-container *ngForlet item of itemsng-container *ngTemplateOutletcardItemTemplate/ng-container/ng-container/ng-containerul *ngSwitchCaselistli *ngForlet item of itemsng-container *ngTemplateOutletlistItemTemplate/ng-container/li/ul
/ng-container这是该组件的使用示例 import { Component } from angular/core;Component({template: card-or-list-view[items]items[mode]modediv *cardItem静态卡片模板/divli *listItem静态列表模板/li/card-or-list-view})
export class UsageExample {mode list;items [{header: 使用 NgTemplateOutlet 在 Angular 中创建可重用组件,content: 单一职责原则...} // ... 更多项];
}通过这些更改CardOrListViewComponent 现在可以根据提供的模板以卡片或列表形式显示任何类型的项。目前模板是静态的。
我们需要做的最后一件事是通过为它们提供上下文来使模板变得动态 ng-container [ngSwitch]modeng-container *ngSwitchCasecardng-container *ngForlet item of itemsng-container *ngTemplateOutletcardItemTemplate; context: {$implicit: item}/ng-container/ng-container/ng-containerul *ngSwitchCaselistli *ngForlet item of itemsng-container *ngTemplateOutletlistItemTemplate; context: {$implicit: item}/ng-container/li/ul
/ng-container这是该组件的使用示例 import { Component } from angular/core;Component({template: card-or-list-view[items]items[mode]modediv *cardItemlet itemh1{{item.header}}/h1p{{item.content}}/p/divli *listItemlet item{{item.header}}: {{item.content}}/li/card-or-list-view})
export class UsageExample {mode list;items [{header: 使用 NgTemplateOutlet 在 Angular 中创建可重用组件,content: 单一职责原则...} // ... 更多项];
}有趣的是我们使用了星号前缀和微语法来实现语法糖。这与以下代码是相同的
ng-template cardItem let-itemdivh1{{item.header}}/h1p{{item.content}}/p/div
/ng-template就是这样我们拥有了原始功能但现在可以通过修改模板来显示任何我们想要的内容而 CardOrListViewComponent 的责任更少了。我们可以向项上下文中添加更多内容比如类似于 ngFor 的 first 或 last或者显示完全不同类型的 items。
结论
在本文中您将一个现有的组件重写以使用 NgTemplateOutlet。
如果您想了解更多关于 Angular 的内容请查看我们的 Angular 专题页面了解相关练习和编程项目。
