[Angular] Communicate with Angular Elements using Inputs and Events-优快云博客

在实际场景中，需与嵌入静态HTML站点的Angular元素通信。此博客介绍了如何向自定义元素传递数据，以及如何以自定义事件形式注册Angular元素的输出，还提及了事件监听相关内容。

In a real world scenario we obviously need to be able to communicate with an Angular Element embedded into our static HTML site. In this lesson we will learn how we can pass data into a Custom Element and how we can register to an Angular Element’s output in the form of custom events.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  // selector: 'do-greet',
  template: `
    <div>Hi, {{ name }}!</div>
    <button (click)="doGreet()">Greet</button>
  `,
  styles: []
})
export class GreeterComponent implements OnInit {
  @Input() name;
  @Output() greet = new EventEmitter();

  constructor() {}

  doGreet() {
    this.greet.emit(`Hi, ${this.name}`);
  }

  ngOnInit() {}
}

Listening for the events:

<html>
  <body>
    <do-greet name="Juri"></do-greet>

    <script src="./polyfills.js"></script>
    <script src="./ngelements.js"></script>
    <script>
      const el = document.querySelector('do-greet');
      el.addEventListener('greet', ev => {
        alert(ev.detail); // get the event output from 'detial'
      });
    </script>
  </body>
</html>