我正在开发一个 Angular 迁移项目,其中的代码正在从 AngularJS 重构为 Angular 5。这是 AngularJS 代码片段。
HTML
<ul >
<li ng-if="participant.reports !== null && participant.reports !== undefined" ng-repeat="report in participant.reports">
<a ng-click="choosePDFLang(participant, report.type, report.name)">
<img src="i/pdf_image.png"/>{{ report.name | translate }}
</a>
</li>
</ul>
JS
$scope.choosePDFLang = function(participant, reportType, reportName)
$modal.open({
templateUrl: 'theTemplate'
controller: 'theController',
keyboard: true,
backdrop: 'static',
scope: $scope
}).result.then(function() {
});
}
如您所见,当单击下拉列表中的某个项目时,它会打开一个模式,其中包含自己的模板和 Controller ,用于处理所有逻辑。
现在我必须使用 Angular 5 应用相同的逻辑。我的项目正在使用 PrimeNG 组件。我必须使用对话框 <p-dialog></p-dialog>
.
我的问题是:当单击报告超链接时,如何打开此对话框并向其传递所有数据?在 AngularJS 中,我可以通过调用 $modal.open({})
轻松做到这一点函数并赋予它相同的范围,因此现在模态 Controller 也拥有所有数据。
最佳答案
使用 Angular2+ 和 PrimeNG 会更容易。您只需定义一个 display
属性即可显示或隐藏 p-dialog
,无需创建其他组件。
现在,您的代码应该类似于:
HTML
<ul>
<li *ngFor="let report of participant.reports">
<a (click)="choosePDFLang(participant, report.type, report.name)">
{{ report.name }}
</a>
</li>
</ul>
<p-dialog header="{{modalTitle}}" [(visible)]="display">
{{modalContent}}
</p-dialog>
TS
choosePDFLang(participant, reportType, reportName) {
this.display = true;
this.modalTitle = reportName;
this.modalContent = 'Content of ' + reportName;
}
如果您有任何疑问,请不要犹豫!
关于angular - 如何通过单击按钮打开 PrimeNG p 对话框并将数据从组件传递到 p 对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50416490/