Question

我有一个角度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组件的所有值

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

1 个答案: