Angular 2 =>通知应用程序组件中的事件的路由组件

慢慢掌握angular 2，但我在某个特定问题上陷入死胡同。Angular 2 =>通知应用程序组件中的事件的路由组件

如果您有此安排;

<parent> 
    <child/> 
</parent>

我可以通过@Input（）通知孩子父母的变化，并让它听取变化。我可以通过使用@Output（）和EventEmitter通知父母更改孩子。

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

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

我希望能够通知被装载到路由器出口，该按钮被点击的组件。

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

什么是最好的方式来实现这一目标？

干杯

来源

2017-02-23 Mark

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

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服务（您可以在任何需要的地方订阅多个组件）

来源

2017-02-23 18:52:18 GeorgDangl

看来，共享服务是实现这一目标的唯一真正方法。我已经在某处读过服务不应该使用事件发射器，这对我来说是最好的选择，因为我没有传达一个状态，但是一个意图，即addEntity是说用户想看到addEntity屏幕，它不处理可见性（因为它可能已经可见）。无论哪种方式，这确实工作，只是看起来很奇怪，因为它似乎是你订阅的观察值，其值永远不会改变。 – Mark

这解决了我的一个边缘案例问题，我真的不确定如何解决整洁的方式，否则。谢谢。 – Sam

好吧，如果我非常理解你的问题试试这个：把一个返回值的addEntity（）方法，可以是一个字符串或东西，你知道的那种，你要添加的东西（英雄/联系人/宠物）。然后在主模板把一个局部变量取addEntity（）方法，像这样的回报：

<button (click)='#type_added = addEntity()>Add</button>

那么你可以传递“#type_added”局部变量这样的其他组件：

<router-outlet [added] = #type_added></router-outlet>

并且您必须在您的router-outlet组件（.ts）中声明变量“added”和@Output。

来源

2017-02-23 18:42:45 Adrian

您确定这有效吗？ 'router-outlet'是组件的[选择器]（https：// angular。io/docs/ts/latest/api/router/index/RouterOutlet-directive.html）将子路由组件呈现到其中，而不是自定义组件。 – GeorgDangl

Angular 2 =>通知应用程序组件中的事件的路由组件

回答

相关问题