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对话框并将数据从组件传递到对话框？

1 个答案: