Как открыть p-диалоговое окно PrimeNG по нажатию кнопки и передать данные из компонента в p-диалог? - PullRequest
Новая
       17

Как открыть p-диалоговое окно PrimeNG по нажатию кнопки и передать данные из компонента в p-диалог?

0 голосов
/ 18 мая 2018

Я работаю над проектом миграции на 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({}) и предоставив ей ту же область видимости, так что теперь контроллер модалов также имеет все данные.

1 Ответ

0 голосов
/ 18 мая 2018

Это проще с 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

Не стесняйтесьесли есть вопросы!

...