Angular 2 => 将应用组件中的事件通知给路由组件

Question

慢慢地掌握了 angular 2，但我在一个特定的问题上走到了尽头。

如果你有这样的安排；

<parent>
    <child/>
</parent>

我可以通过使用@Input() 通知子级父级的变化，并让它监听变化。我可以通过使用 @Output() 和 EventEmitters 来通知父级子节点的变化。

我现在看到的是通知路由组件（一个在单击链接时动态加载的组件）关于主 appComponent 中发生的特定事件。见下面的例子；

<app>
    <button (click)='addEntity()>Add</button>
    <router-outlet></router-outlet>
</app>

我希望能够通知加载到路由器插座的组件已单击该按钮。

一个使用示例是具有多个功能（英雄/联系人/宠物等），每个功能都有自己的用于添加实体的对话框。根据选择的路由，它需要通知选择的特征组件（例如ContactComponent）显示其特定的细节组件/视图/模板（例如contact-detail.component）。

实现这一目标的最佳方法是什么？

干杯

Answer 1

也有可能只使用共享服务在不同组件之间进行通信，例如通过这样的信使服务：

信使服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class MessengerService {
    private messageSource: BehaviorSubject<boolean> = new BehaviorSubject(true); 
    public message = this.messageSource.asObservable();
    public buttonClicked(value: boolean) {
        this.messageSource.next(value);
    }
}

父组件

export class ParentComponent {
    constructor(private messengerService: MessengerService) { }
    addEntity() {
        this.messengerService.buttonClicked(true);
    }
}

子组件

import { Subscription } from 'rxjs/Rx';
export class ChildComponent implements OnInit, OnDestroy {
    private messageSubscription: Subscription;
    constructor(private messengerService: MessengerService) { }
    ngOnInit() {
        this.messageSubscription = this.messengerService.message.subscribe(m => {
            // Act upon the click event
        });
    }
    ngOnDestroy() {
        this.messageSubscription.unsubscribe();
    }
}

这将是一种分离组件并依赖信使服务的干净方法（您可以在需要的任何地方订阅多个组件）