Question

我有一个自定义的角度组件，该组件由我在该角度组件内部使用的第三方库动态地添加了HTML元素。特定的第三方库无关紧要，因为我正在寻找一种可以与各种第三方库一起使用的解决方案。

我想将angular的模拟封装属性（例如_ngcontent-c1）应用/添加到这些动态添加的HTML元素。如果存在（我无法找到这种方法）或其他相当可靠的方法，我希望使用一种官方方法。

Answer 1

这是我发现的一种非官方方法：

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

注意：这确实允许您设置动态添加的HTML元素的样式。

我的猜测是，不能保证此属性的约定在Angular的两个版本之间都是稳定的，因此在升级到新版本时，此解决方案可能会遇到问题（尽管更新此解决方案可能很简单）。这种情况）。

如果Angular公开一个类似于getContentAttr的函数，将内部实现抽象一些，那就太好了。

如何将Angular的模拟封装属性应用于动态添加到Angular组件的HTML元素？

1 个答案: