你能获得组件封装主机ID吗?

时间:2016-10-19 19:02:55

标签: angular

有没有办法获得给予组件的封装主机ID?

如果您有使用ViewEncapsulation.Emulated的组件, DOM 中的元素将具有类似_nghost-par-2.的属性名称,其中唯一ID 赋予组件封装相关样式。

如何将该ID作为组件构造函数的一部分?

产生效果:

@Component({
  hostId:string;
  ...
})
export class myComponent implements OnInit {
  constructor(host:Host) {
    this.hostId = host.id;
  }
  ...
}

1 个答案:

答案 0 :(得分:4)

此ID由以下部分组成:

_nghost   -   par    -     2
   |           |           |
 static      APP_ID   _nextCompTypeId

APP_ID 是来自@ angular / core

的正义代币
  

如果您需要避免随机生成的值用作   应用程序ID,您可以通过DI提供商提供自定义值   使用此令牌配置根注入器

_nextCompTypeId 是在私有类ViewUtils内的框架内生成的。

似乎没有一个公共方法可以返回它的值。所以可能以下工作

export class MyComponent { 
  id: string;
  constructor(@Inject(APP_ID) appId: string, vcRef: ViewContainerRef) {
    this.id = `${appId}-${vcRef.injector['_view'].viewUtils._nextCompTypeId - 1}`;
  }
}

另一种方法是从attributes通过elementRef

获取