[Angular] Communicate with Angular Elements using Inputs and

发布时间：2020-12-17 07:02:10 所属栏目：安全来源：网络整理

导读：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

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!