角2 =>在应用程序组件中将事件通知路由组件 [英] Angular 2 => notify a route component of an event in the app component

问题描述

慢慢地抓住角度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?

欢呼

推荐答案

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

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

这是分离组件并依赖Messenger服务(您可以在需要时可以在多个组件中订阅)的一种干净方法

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 =>在应用程序组件中将事件通知路由组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！