Angular Elements：获取对宿主 Web 组件元素的引用答案

【问题标题】：Angular Elements: Get a reference to host web component elementAngular Elements：获取对宿主 Web 组件元素的引用
【发布时间】：2022-12-09 16:05:24
【问题描述】：

使用 Angular Elements 时，我们通常会像这样将应用程序构建为 Web 组件：

export class AppModule implements DoBootstrap {

    ngDoBootstrap(appRef: ApplicationRef): void {
        customElements.define('foo', createCustomElement(AppComponent, {injector: appRef.injector}));
    }
}

综上所述，当在主机应用程序中插入主机标签时，相关的 DOM 片段如下所示：

...
<foo>
    #shadow-root
        (AppComponent's contents)

有没有办法将对托管 Web 组件的 <foo> 元素的引用（如 ElementRef）注入到 AppComponent 的构造函数中？

【问题讨论】：

？？这不是this.getRootNode().host 做的吗？？（当他们称 2.0 为升级)

标签： angular web-component angular-elements

【解决方案1】：

事实证明，注入到构造函数中的 ElementRef 恰好指向该元素（<foo> 标记），它是 Shadow DOM 的父元素：


constructor(private readonly el: ElementRef) {
    // el.nativeElement is <foo>
}

【讨论】：