如何在单击按钮时打开 PrimeNG p 对话框并将数据从组件传递到 p 对话框？

Question

我正在进行一个 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() {
            });
        }

如您所见，当单击下拉列表中的项目时，它会打开一个模式，该模式具有自己的模板和处理所有逻辑的控制器。

现在我必须使用 Angular 应用相同的逻辑 5. 我的项目正在使用 PrimeNG 组件。我必须使用对话框 <p-dialog></p-dialog>.

我的问题是：如何打开此对话框并在单击报表超链接时将所有数据传递给它？在 AngularJS 中，我可以通过调用 $modal.open({}) 函数并为其赋予相同的作用域来轻松完成此操作，因此现在模态控制器也具有所有数据。

Answer 1

使用 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;
  }

见StackBlitz

如有任何疑问，请不要犹豫！

如何在单击按钮时打开 PrimeNG p 对话框并将数据从组件传递到 p 对话框？

How to open a PrimeNG p-dialog box on a button click and pass data from the component to p-dialog?

angular

primeng

primeng-dialog