将数据从组件传递到角度 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>

现在任务容器可以从容器中得到这个，如下所示。

在容器组件中

modalInput: any;

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

现在，Modal 组件可以接收如下，

@Input
task