Angular 2在两个组件之间传递数据

Question

我想在两个组件之间传递数据，但我的问题是:

我有两个组件，假设一个是“主”，另一个是“模态对话框”。

在我的主组件中，我想打开模态对话框并从模态对话框中获取数据，而无需离开主组件

我知道如何使用@Input，但我看不到在我的应用程序中使用它的方法

例如在我的 main.html 中，如果我想将数据从 main 传递到模态，我会使用

<modal-dialog [data]="data"> </modal-dialog>

但我想做相反的事情

类似的事情

<modal-dialog /*get data from modal when event happens*/ > </modal-dialog> 

模态对话框将为我的主窗口发送一条消息，例如，如果我关闭它或单击某个按钮。

Answer 1

查看@Output

<modal-dialog [data]="data" (DialogEvent)="processEvent($event)"> </modal-dialog>

在 ModalDialogComponent 中

@Output()
public DialogEvent = new EventEmitter();

public methodWhichTriggers(){
   this.DialogEvent.emit({id: 1, type: "anything you need"})
}

在 MainComponent 中，您需要具有

public processEvent($event){
   console.log($event); //will print {id: 1, type: "anything you need"}
}