角度 2 =>将 app 组件中的事件通知给路由组件 [英] Angular 2 => notify a route component of an event in the app component

问题描述

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

Slowly getting to grips with angular 2 but I've come to dead end on one particular issue.

如果你有这样的安排；

<parent>
    <child/>
</parent>

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

I can notify the child of changes in the parent by using @Input() and get it to listen to changes. I can notify the parent of changes in the child by using the @Output() and EventEmitters.

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

What I'm now looking at is notifying a routed component (a component that is loaded dynamically when a link it clicked) about a specific event that happens in the main appComponent. See example below;

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

我希望能够通知加载到路由器插座的组件按钮已被点击.

I want to be able to notify the component that is loaded into the router-outlet that the button has been clicked.

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

An example of usage would be having multiple features (heroes/contacts/pets etc) each with its own dialog for adding an entity. Depending on the selected route, it would need to notify the selected feature component (e.g. ContactComponent) to display its specific detail component/view/template (e.g. contact-detail.component).

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

Whats the best way to achieve this?

干杯

推荐答案

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

There's also the possibility of just using a shared service to communicate between different components, e.g. via a messenger service like this:

MessengerService

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();
    }
}

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

This would be a clean way to decouple the components and rely on a messenger service (that you could subscribe to in multiple components, wherever it is required)

这篇关于角度 2 =>将 app 组件中的事件通知给路由组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！