Primeng - 对话服务将数据传递给对话组件

Posted

技术标签:

【中文标题】Primeng - 对话服务将数据传递给对话组件【英文标题】:Primeng - dialog service passing data to dialog component 【发布时间】:2019-06-26 16:07:09 【问题描述】:

使用 PrimeNg 的动态对话示例展示了目标对话如何获取数据并显示。 我可以通过创建一个带有 observables 的服务来将数据传递给对话,但我知道对话服务有一些可用的参数(如数据)可以传递。 对话将如何检索通过服务传递的数据?

https://www.primefaces.org/primeng/#/dynamicdialog https://github.com/primefaces/primeng/blob/master/src/app/components/dynamicdialog/dynamicdialog-config.ts https://github.com/primefaces/primeng/blob/master/src/app/components/dynamicdialog/dialogservice.ts

【问题讨论】:

【参考方案1】:

父组件内部:

this.dynamicDialogRef = this.dialogService.open(EmployeeDialogComponent, 
    header: 'View Employee Details for - ' + this.employee.name,
    width: '90%',
    contentStyle: "min-height": "800px", "overflow": "auto",
    baseZIndex: 10000,
    data: employee: this.employee
);

内部对话框组件:

export class EmployeeDialogComponent implements OnInit 
constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig)  
     console.log("Data: " + JSON.stringify(config.data.employee));

ngOnInit() 

【讨论】:

【参考方案2】:

动态对话框在构造函数中有一个传递数据的选项。 例如,

const ref = this.dialogService.open(MyComponent, data : myData);

更新

您应该在构造函数中注入 DynamicDialogService,然后您可以访问您在对话框中传递的数据

代码在这里:

constructor( private dialogService: DynamicDialogService) 

然后您可以像这样访问和查看您传递的所有数据:

console.log(this.dialogSerive.data)

【讨论】:

然后你怎么访问data 我将此答案更新为最新版本的primeng services请批准❤❤【参考方案3】:

我有同样的问题。 我删除了:

providers: [DialogService]

来自我将传递数据的组件(对话框组件)

【讨论】:

以上是关于Primeng - 对话服务将数据传递给对话组件的主要内容,如果未能解决你的问题,请参考以下文章

vue js将数据传递给组件

通过变量与 Getter 将数据传递给组件之间的区别

将数据传递给根 Vue 类组件

我可以使用花括号将数据传递给刀片组件吗?

使用反应钩子将数据传递给兄弟组件?

通过 Redirect 将数据传递给组件