将数据从组件传递到角度为4的模态对话框

Question

我有一个angular 4应用程序，我有2个组件，一个时间轴和一个模态对话框。 当我双击时间线时，我想打开模态对话框，并将数据传递给双击功能。

因此，在timeline.component.ts中，我有：

        Timeline.prototype.onTaskDoubleClick = function(task){
            console.log("Double click on task" + task.id);
            console.log(task);
            $('#addProjectForm').click();
        }

如何将对象“任务”从该函数传递给模态组件？

Answer 1

使用@Input和@Output作为流。

创建一个组件container ，以及其他两个容器的时间轴和模式

在容器组件中同时注入时间线和模式。

现在单击“时间轴”组件，使用以下命令

clickEmitter = new EventEmitter<task: any>()

doubleClick(task: any) {
  this.clickEmitter.emit(task);
}

现在，将此输出绑定到容器组件，如下所示

<timeline  (clickEmitter)="clickHandler($event)"></timeline>
<modal [task]="modalInput"></modal>

现在，任务容器可以从conatiner中获取此信息，如下所示。

在容器组件中

modalInput: any;

clickHandler(task) {
  this.modalInput = task;
}

现在，这可以通过Modal组件接收，如下所示：

@Input
task