在 Angular 4 应用程序的模态对话框中显示数据

Question

我有一个 Angular 4 应用程序，我想在对话框中显示数据。所以，我使用@Output 将数据从子组件传递到父组件。

所以，在我的父组件中：

export class DashboardComponent {
    myTask;


    public returnTask(task: any):void {
        console.log("returnTask");
        this.myTask = task;
        console.log(this.myTask);
    }
    openDialogEditTask() {
        console.log(this.myTask);
        let dialogRef = this.dialogEditTask.open(DialogEditTask, {
            //task
            data:  {
                start: this.myTask.start,
                end: this.myTask.end,
                status: this.myTask.status,
                user: this.myTask.user,
                content: this.myTask.content,
                id: this.myTask.id,
                rate: this.myTask.rate
            }
        });
        dialogRef.afterClosed().subscribe(result => {
            this.selectedOption = result;
        });
}
}

在父 html 中，我有：

<visTimeline (myTask)="returnTask($event)"></visTimeline>

在子组件中，我有：

export class VisTimelineComponent {
    @Output() myTask: EventEmitter<any> = new EventEmitter<any>();
}

我用self.myTask.emit(task);发出任务

所以，我在父组件中获取数据（我可以在控制台中看到它们）但我不能在 openDialogEditTask 中使用它们，因为它是未定义的。

那么，您知道如何在调用函数以在对话框中获取数据之前获取数据吗？

编辑： 这是我在子组件中发出数据的代码：

ngOnInit() {
    Timeline.prototype.onTaskDoubleClick = function(task) {
        console.log("Double click on task " + task.id);
        console.log(task);
        $('#editTask').click();
        self.myTask.emit(task);
    };
}

Timeline.prototype.onTaskDoubleClick 是来自库的函数。

Answer 1

我认为您无法将数据传递给您的模态组件。尝试使用 componentInstance 方法。

    openDialogEditTask() {
        console.log(this.myTask);
        let dialogRef = this.dialogEditTask.open(DialogEditTask, {
            height: '90%',
            width: '80%'
        });
        dialogRef.componentInstance.myTaskValue = this.myTask; //<- passing data into DialogEditTask component
        dialogRef.afterClosed().subscribe(result => {
            this.selectedOption = result;
        });
}

在您的 DialogEditTask 中声明一个变量 myTaskValue: any;

您将在这个 myTaskValue 变量中获得传递给 DialogEditTask 组件的所有值