@H_404_40@ `,}) export class App { name: string; condition: boolean = false; constructor() { this.name = 'Angular2' } } @H_404_40@

以上代码成功运行后，浏览器的显示内容如下：

(图片来源：https://netbasal.com/)

ViewContainerRef 对象提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。

现在，你已经了解如何创建结构指令，接下来让我们看看两个具体的实例。

基于用户角色显示不同的内容

指令定义

constructor(
private templateRef : TemplateRef,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();
}
}
@H_404_40@

指令应用

404_40@

<div *ifRole="'client'">
Only for Client
@H_404_40@

<div *ifRole="'editor'">
Only for Editor
@H_40440@
@H404_40@

创建 Range 指令

指令定义

@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) { }

private generateRange(from: number,to: number): number[] {
var numbers: number[] = [];
for (let i = from; i <= to; i++) {
numbers.push(i);
}
return numbers;
}
}
@H_404_40@

以上示例中，我们在调用 createEmbeddedView() 方法时，设置了第二个参数 {$implicit: num} 。Angular 为我们提供了 let 模板语法，允许在生成上下文时定义和传递上下文。

这将允许我们引用 *range="[20,30]; let num" 模板中声明的变量。我们使用 $implicit 名称，因为我们不知道用户在使用这个指令时，会使用什么名字。

(图片来源：https://netbasal.com/)

指令应用

Your age:

Year:

以上代码成功运行后，浏览器的显示内容如下：

(图片来源：https://netbasal.com/)

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。