时间:2021-07-01 10:21:17 帮助过:5人阅读
结构指令是什么?
结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf
和 *ngFor
。
了解 * 号语法
* 号是语法糖,用于避免使用复杂的语法。我们以 *ngIf 指令为例:
(图片来源:https://netbasal.com/)
创建结构指令
首先,让我们了解如何创建一个结构指令。 接下来我们将要实现一个简单的 ngIf 指令。
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[myNgIf]'}) export class MyNgIfDirective { constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } @Input() set myNgIf(condition: boolean) { if (condition) { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } } }
我们可以按照以下方式使用我们的指令:
<div *myNgIf=”condition”></div>
下面我们来解释一下上面的代码。
TemplateRef
如名字所示,TemplateRef 用于表示模板的引用。
(图片来源:https://netbasal.com/)
ViewContainerRef
正如上面介绍的,模板中包含了 DOM 元素,但如果要显示模板中定义的元素,我们就需要定义一个插入模板中元素的地方。在 Angular 中,这个地方被称作容器,而 ViewContainerRef 用于表示容器的引用。那什么元素会作为容器呢?
Angular 将使用 comment 元素替换 template 元素,作为视图容器。
我们来看一个具体的示例:
@Component({ selector: 'my-app', template: ` <div> <h2 *myNgIf="condition">Hello {{name}}</h2> <button (click)="condition = !condition">Click</button> </div> `, }) export class App { name: string; condition: boolean = false; constructor() { this.name = 'Angular2' } }
以上代码成功运行后,浏览器的显示内容如下:
(图片来源:https://netbasal.com/)
ViewContainerRef 对象提供了 createEmbeddedView()
方法,该方法接收 TemplateRef 对象作为参数,并将模板中的内容作为容器 (comment 元素) 的兄弟元素,插入到页面中。
现在,你已经了解如何创建结构指令,接下来让我们看看两个具体的实例。
基于用户角色显示不同的内容
指令定义
@Directive({selector: '[ifRole]'}) export class IfRoleDirective { user$ : Subscription; @Input("ifRole") roleName : string; constructor( private templateRef : TemplateRef<any>, private viewContainer : ViewContainerRef, private authService : AuthService ) {} ngOnInit() { this.user$ = this.authService.user .do(() => this.viewContainer.clear()) .filter(user => user.role === this.roleName) .subscribe(() => { this.viewContainer.createEmbeddedView(this.templateRef); }); } ngOnDestroy() { this.user$.unsubscribe(); } }
指令应用
<div *ifRole="'admin'"> Only for Admin </div> <div *ifRole="'client'"> Only for Client </div> <div *ifRole="'editor'"> Only for Editor </div>
创建 Range 指令
指令定义
import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core'; @Directive({ selector: '[range]' }) export class RangeDirective { _range: number[]; @Input() set range(value: number) { this.vcr.clear(); this._range = this.generateRange(value[0], value[1]); this._range.forEach(num => { this.vcr.createEmbeddedView(this.tpl, { $implicit: num }); }); } constructor( private vcr: ViewContainerRef, private tpl: TemplateRef<any>) { } private generateRange(from: number, to: number): number[] { var numbers: number[] = []; for (let i = from; i <= to; i++) { numbers.push(i); } return numbers; } }
以上示例中,我们在调用 createEmbeddedView()
方法时,设置了第二个参数 {$implicit: num}
。Angular 为我们提供了 let 模板语法,允许在生成上下文时定义和传递上下文。
这将允许我们引用 *range="[20,30]; let num"
模板中声明的变量。我们使用 $implicit 名称,因为我们不知道用户在使用这个指令时,会使用什么名字。
(图片来源:https://netbasal.com/)
指令应用
<h1>Your age:</h1> <select> <ng-container *range="[18, 80]; let num"> <option [ngValue]="num">{{num}}</option> </ng-container> </select> <h1>Year:</h1> <select> <ng-container *range="[1998, 2016]; let num"> <option [ngValue]="num">{{num}}</option> </ng-container> </select>
以上代码成功运行后,浏览器的显示内容如下:
(图片来源:https://netbasal.com/)
总结
以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。