如何从 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
    }
  };
}