如何从javascript（.js文件）按钮单击事件调用或触发Angular组件方法

Question

当我单击位于同一项目的“ src”文件夹中单独的纯HTML文件中的html按钮时，我试图触发角度分量方法。

我通过NgZone，回调函数等尝试了不同的方法，但是角度分量方法没有触发。

Answer 1

简单的自定义事件似乎很有帮助

//   in component  
document.addEventListener('myEvent',()=>{
  console.log('here it is')
});

// in js file
var event = new Event('myEvent');
document.dispatchEvent(event);

Answer 2

我想您有一个名为c1的组件，与此组件相关联的是html文件。

因此，您需要在html文件中添加一个类似的按钮：

<button (click)="clickMe()"></button>

在您的打字稿文件中实现您的方法：

clickMe() { //your code here }

Answer 3

在您的js文件中，引发如下事件：

window.postMessage("Disconnected", "*")

在ts文件中，您可以像这样监听该事件：

ngOnInit() {
  window.onmessage = (e)=>{
    if (e.data == 'Disconnected') {
      alert("Yeah! it's working");
      //you can call any method here
    }
  };
}