Angular 结构性指令中获取宿主元素

语法糖

  • 号是语法糖,用于避免使用复杂的语法。我们以 *ngIf 指令为例:
    1
    2
    3
    <div *nfIf='person'>
    {{person.name}}
    </div>

以上的内容实际的输出相当于:

1
2
3
<template [ngIf]='person'>
<div>{{person.name}}</div>
</template>

Angular 会把template 替换换为 Comment 元素。

ElementRef 使用问题

如果在结构性指令中使用ElementRef,其指向的不是宿主元素,而是一个Comment元素。
比如我们自定义一个 MyIf 结构性指令。

1
2
3
<div *myIf='person'>
{{person.name}}
</div>

使用ElementRef 的时候不是获取的 div元素,而是Angular创建的Comment元素,同样 @hostlistener ,@hostbinding 。

获取宿主元素的方式

以下的dom 元素就是创建后的宿主的元素。

1
2
const ref = this.viewContainer.createEmbeddedView(this.templateRef);
const dom = ref.rootNodes[0];

参考 https://segmentfault.com/a/1190000009307714
参考 https://segmentfault.com/a/1190000008672478