两个自定义（角度）元素之间的通信

两个自定义（角度）元素之间的通信

假设有两个自定义元素。

- login-button `<login-button id="loginbutton"></login-button>;`
- and status-login `<status-login></status-login>`

当按下登录按钮时元素login-button将发出输出事件loginbuttonpressed。 Angular 元素会将此输出事件转换为自定义事件。

然后在状态登录中您可以执行以下操作：

constructor( @Inject(DOCUMENT) document) {
    document.getElementById('loginbutton').addEventListener('loginbuttonpressed', this.loginIsPressed);
}

所以当自定义事件被调度时它会监听，这一切都很好。

问题：是否有另一种正确的方法可以在自定义元素与 Angular 元素之间进行通信？

使用 Angular EventEmitter，在一个组件中发出并通过一些公共服务在另一个组件中订阅。每当调用 loginBtnClick() 时，都会在状态组件中触发事件。通过这种方式，即使它们不存在父子关系，您也可以将数据从一个组件传递到另一个组件

import { EventEmitter } from '@angular/core';
// service
@Injectable()
export class CommonService(){
loginClicked: EventEmitter<String> = new EventEmitter<String>();
}

export class loginBtn(){
   constructor(private commonService: CommonService);

   loginBtnClick(){
      this.commonService.loginClicked.emit({data: "any data"});
   }
}

export class status(){
   constructor(private commonService: CommonService);

   ngOnInit(){
       this.commonService.loginClicked.subscribe((data) => {
           console.log(data) // {data: "any data"}
        })
   }
}