首页 文章

在Angular 2应用程序中将事件向下传递给不是另一个的父或子的组件

提问于
浏览
0

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

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

这是在原始组件中用于触发对话框打开的代码:

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;

    }
}

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

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

我只需要一种方法来触发对话框组件中的事件,并将其发送回另一个组件 . 最简单的方法是什么?

1 回答

  • 2

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

    考虑以下 :

    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

    要获得对话状态,请执行以下操作:

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

    要为对话框设置新状态,请执行以下操作:

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

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

相关问题