Angular5迁移：点击按钮打开PrimeNG p-dialog并传递数据

嘿，我刚完成过类似的AngularJS到Angular的迁移任务，用PrimeNG的<p-dialog>来实现你要的功能其实很清晰，下面我一步步给你拆解实现方案：

1. 主组件HTML模板（对应原AngularJS的列表部分） #

把原AngularJS的指令替换成Angular的语法，同时添加<p-dialog>组件来承载模态框内容：

<ul>
  <li *ngIf="participant.reports" 
      *ngFor="let report of participant.reports">
    <a (click)="choosePDFLang(participant, report.type, report.name)">
      <img src="i/pdf_image.png"/>
      {{ report.name | translate }}
    </a>
  </li>
</ul>

<!-- PrimeNG对话框组件 -->
<p-dialog 
  [(visible)]="displayDialog" 
  [modal]="true" 
  [closable]="false"
  [closeOnEscape]="true"
  [backdrop]="true">

  <!-- 嵌入对话框内容组件，传递所需数据 -->
  <app-report-dialog
    [participant]="selectedParticipant"
    [reportType]="selectedReportType"
    [reportName]="selectedReportName"
    (onClose)="displayDialog = false">
  </app-report-dialog>

</p-dialog>

说明：

• *ngIf="participant.reports" 简化了原AngularJS的空值判断，Angular中如果participant.reports是null/undefined/空数组都会被视为false
• [(visible)]="displayDialog" 双向绑定控制对话框的显示/隐藏
• [modal]="true" [backdrop]="true" 对应原AngularJS的backdrop: 'static'，[closeOnEscape]="true"对应keyboard: true

2. 主组件TypeScript代码 #

在主组件类中定义控制对话框的变量和点击事件方法，代替原AngularJS的$scope和$modal.open：

import { Component } from '@angular/core';

@Component({
  selector: 'app-participant-reports',
  templateUrl: './participant-reports.component.html'
})
export class ParticipantReportsComponent {
  // 控制对话框显示状态
  displayDialog = false;
  // 存储选中的报告相关数据
  selectedParticipant: any;
  selectedReportType: string;
  selectedReportName: string;

  choosePDFLang(participant: any, reportType: string, reportName: string): void {
    // 赋值选中的数据
    this.selectedParticipant = participant;
    this.selectedReportType = reportType;
    this.selectedReportName = reportName;
    // 打开对话框
    this.displayDialog = true;
  }
}

3. 对话框内容组件（对应原AngularJS的模板和控制器） #

把原AngularJS的theTemplate和theController拆分成独立的Angular组件，通过@Input接收主组件传递的数据：

对话框组件HTML（report-dialog.component.html） #

<!-- 这里放原AngularJS中theTemplate的内容 -->
<div class="dialog-content">
  <!-- 示例：使用传递过来的数据 -->
  <p>参与者：{{ participant?.name }}</p>
  <p>报告类型：{{ reportType }}</p>
  <p>报告名称：{{ reportName | translate }}</p>
  
  <!-- 对话框操作按钮 -->
  <button (click)="onClose.emit()">关闭</button>
</div>

对话框组件TypeScript（report-dialog.component.ts） #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-report-dialog',
  templateUrl: './report-dialog.component.html'
})
export class ReportDialogComponent {
  // 接收主组件传递的数据
  @Input() participant: any;
  @Input() reportType: string;
  @Input() reportName: string;
  // 向主组件发送关闭事件
  @Output() onClose = new EventEmitter<void>();

  // 这里写原AngularJS控制器theController中的逻辑
  // 比如处理PDF语言选择的业务代码
}

4. 模块配置 #

别忘了在你的NgModule中导入PrimeNG的DialogModule，并声明对话框组件：

import { NgModule } from '@angular/core';
import { DialogModule } from 'primeng/dialog'; // 导入PrimeNG对话框模块
import { ParticipantReportsComponent } from './participant-reports.component';
import { ReportDialogComponent } from './report-dialog.component';

@NgModule({
  imports: [DialogModule],
  declarations: [ParticipantReportsComponent, ReportDialogComponent]
})
export class YourModule { }

关键变化说明 #

和原AngularJS的$modal.open({scope: $scope})共享作用域不同，Angular中我们通过**组件输入属性（@Input）**来传递数据，这种方式更清晰、符合组件化的设计理念，避免了作用域污染的问题。如果需要从对话框向主组件传递数据，可以用@Output事件发射器，就像上面例子中的onClose事件。

内容的提问来源于stack exchange，提问作者yugrac