Question

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

所以，在timeline.component.ts中，我有：

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

如何将对象'task'从此函数传递给模态组件？

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

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

1 个答案:

在容器组件