未从原始JavaScript addEventListener接收角度Web组件激发的事件

我有一个简单的Angular Web组件，它触发一个事件，当从另一个Angular容器组件捕获时，该事件被捕获得很好。但是，当我试图从JavaScript捕获事件时，我什么也得不到，即使组件渲染良好并触发事件

以下是我的原始JavaScript，它不起作用：

document.addEventListener("DOMContentLoaded", (event) => {
    const h = document.querySelector('frvp-header');
    h.addEventListener('darkChange', (e) => {
      // never gets here
      const dark = e.detail;
      console.log('dark', dark);
    });
});

选择器为

在角度分量中，我可以确认以下发射器已发射：

@Input() dark = false;
@Output darkChange = new EventEmitter<boolean>();
...
toggleDark() {
   this.dark = !this.dark;
   this.darkChange.emit(this.dark);
}

我尝试将return tyype更改为字符串：

eventemitter（）

，并使用以下命令调用它：

this.darkChange.emit（this.dark.toString（））

，但仍然没有成功

我想这是一件我还没有尝试过的简单事情

---

所以问题是，我如何用原始JavaScript捕获Angular Web组件事件？

所以问题是，我在我的

AppModule

的

@NgModule

装饰器的

数组中注册了该组件。我把它移到了

入口组件

数组中，它就像一个符咒一样工作。

你的角度错了。与其听

DOMContentLoaded

，不如使用angular lifecycle挂钩（

ngOnInit

，

ngAfterViewInit

，等等。）@mwilson这不是我要问的问题：我的问题是使用来自原始JavaScript的angular Web组件，而不是angular。这是一个@angular/elements“web”组件，您可以在angular应用程序之外使用。是的。这是问题的一部分。如果你不打算使用，为什么要使用angular？Angular为这些东西提供了特定的生命周期挂钩。您是

文档。querySelector

可能是在angular渲染组件之前运行的。您不应该这样做。@mwilson另外，如果您查看我问题中的代码段，您将看到

document.querySelector

调用是在加载domcontents之后进行的。在加载所有内容后，我从控制台添加了addEventListener，但它仍然没有启动。@mwilson阅读了问题开头的陈述，我已经承认从角度看，这很好。然后阅读结尾问题，清楚地说明这是关于使用原始JavaScript的。

let ev = new Event('darkChange');
let hd = document.querySelector('frvp-header');
hd.dispatchEvent(ev);