如何使用Nebular对话框组件将数据传递到Angular组件



我正试图将我的objectData从componentA发送到DialogComponent以编辑对象信息。

ComponentA打开对话框并传递如下数据:

export class ComponentA implements OnInit {
constructor(private dialogService: NbDialogService) {}
openDialog(data) {
this.dialogService.open(DialogComponent, {
context: {
product: data,
},
});
}
}

星云对话组件:

export class DialogComponent implements OnInit {
product: any; <--- the object that the dialogue will receive
preSaleItem: any; <-- and turn into it, within the dialogue.
constructor(
private ref: NbDialogRef<DialogComponent>,
private dataService: DataService,
) {
}
navigateToComponentB() { 
this.dataService.data = this.preSaleItem;
this.router.navigate(['/pages/componentB']);
this.close();
}
close() {
this.ref.close();
}

对话框中的将用新信息填充预销售项目,并砂到组件B。

我尝试了两种方法来传输数据,一种是通过服务

export class DataService {
data: any;
constructor() {
console.log(this.data); <----- the return is undefined
}

没有任何回报。我认为Nebular组件Dialog正在扼杀示波器。

我的组件B将接收数据是:

export class ComponentB implements OnInit {
constructor(private dataService: DataService) {}
ngOnInit() {
this.preSaleItem = this.dataService.data;
console.log(this.preSaleItem); <----- return is the same of the service
}
}

强化有关该问题的信息:我有一个componentA,它将产品传递到对话框,并构建我前面提到的preSaleItem,效果很好。

之后,当在对话框中构建preSaleItem时,我需要将其发送到componentB。但按照我的想法,通过服务是行不通的(

我尽量不去浏览这个对话框,使用componentA作为服务,使用可观察的var作为componentB,它成功了。但我需要通过对话框的数据。

可能的解决方案是什么?

我找到了一种通过角度路线解决问题的方法。我将放一个简单的代码来演示。使用state属性。

export class DialogComponent implements OnInit {
product: any; <--- the object that the dialogue will receive
preSaleItem: any; <-- and transform, to move to componentB.
constructor(private ref: NbDialogRef<DialogComponent>) {}
navigateToOptionals() {
this.fillPreSaleItem();
this.router.navigate(['/pages/componentB', {
state: {
data: this.preSaleItem
}
});
this.close();
}
close() {
this.ref.close();
}
}

我的组件B 怎么样

export class ComponentB implements OnInit {
item: any;
constructor() {}
ngOnInit() {
this.item = history.state.data;;
console.log(this.item); <----- return my object that i want :)
}
}

我发现这个网站帮了我很多!https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

最新更新