在Angular 2应用程序中将事件向下传递给不是另一个的父或子的组件 [英] Passing event down to a component that is not a parent or child of the other in Angular 2 app

问题描述

我试图弄清楚当一个Angular 2组件不共享父子关系时将事件从一个Angular 2组件传递给另一个组件的最简单方法。

I am trying to figure out the simplest way to pass an event from one Angular 2 component to another when they do NOT share a parent-child relationship.

具体来说我有一个用于打开对话框的组件（单击时会打开一个新组件）。一旦用户点击了该新对话框组件上的按钮，我想将该事件的通知发送回原始组件（单击该按钮以打开对话框/组件开始），以便我可以触发功能那里。

Specifically I have a component that is used to open a dialog box (when clicked a new component opens). Once the user has clicked on a button on that new dialog component, I want to send notification of that event back to the original component (where the button was clicked to open the dialog box/component to begin with) so that I can fire a function there.

以下是原始组件中用于触发对话框打开的代码：

Here's the code that is used in the originating component to trigger the opening of the dialog:

public onResponseSelected(option, selectedService)
{
    const primaryEmail = this.getPrimaryEmail();

    let currentService = this.selectedService;
    let activeList = this.getActiveList();

    if (option && option.toString() === 'Follow-up Required')
    {
        // Create dialog
        let dialogRef: MdDialogRef<ResponseProcessComponent>
            = this.mdDialog.open(ResponseProcessComponent, {
                disableClose: true,
                data: {
                    option: option,
                    currentService: currentService,
                    primaryEmail: primaryEmail,
                    activeList: activeList
                }
            });

        dialogRef = null;

    }
}

我正在包装一些数据作为数据的一部分发送到对话框组件。这一切都按预期工作。

I am "packaging" up some data to send to the dialog component as part of "data" here. That's all working as expected.

现在我只需要一种方法将对话框组件（responseProcessComponent）中的事件触发器发送回原始组件。提醒一下，这里没有共享视图，因此我无法通过Input（）向下传递，就像这些是具有父子关系的组件一样。

Now I simply need a way to send an event trigger from dialog component (responseProcessComponent) back down to the originating component. As a reminder, there is no shared view here, so I can't pass down via Input() as if these were components with a parent-child relationship.

I只需要一种方法来触发对话框组件中的事件，并将其发送回另一个组件。最简单的方法是什么？

I just need a way to trigger an event in the dialog box component and have that sent back down to the other component. What's the simplest way to do this?

推荐答案

您可以使用共享服务并从注入服务的任何组件发送通知。

You could use a shared service and send a notification from any component injecting the service.

请考虑以下事项：

dialog.service.ts

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


@Injectable()
export class DialogService {

  public dialog = new BehaviorSubject<string>('Not Clicked');
  dialogObservable = this.dialog.asObservable();

  changeDialogState (value: string): void {
    this.dialog.next(value);
  }
}

然后在你的组件中：

reciver.component.ts

要获得对话状态，请执行以下操作：

To get the dialog state you do:

constructor(private ds: DialogService) {
    this.ds.dialogObservable
       .subscribe((dialogState) => {
              //add your logic here!! for now I'm just gonna console log the sate of the dialog
              console.log(dialogState);
          });
    }

要为您执行的对话设置新状态：

To set a new state for the dialog you do:

changeDialogState(){
this.ds.changeDialogState('Cliked');
}

并且不要忘记在提供的数组和组件中添加服务在同一模块的声明数组中，这样就不会出现任何错误。

and don't forget to add the service in the provides arrays and the component in the declarations array of the same module so you don't get any errors.

这篇关于在Angular 2应用程序中将事件向下传递给不是另一个的父或子的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！