Angular 2中PrimeNG模态框点击按钮无法打开问题求助

嘿，我一眼就发现问题所在了——你在ManageUsersComponent里直接通过构造函数注入DeleteUserComponent的做法是错误的！Angular组件不能像服务那样通过构造函数注入，这样得到的是一个全新的、未挂载到DOM的组件实例，和页面上实际渲染的模态框半毛钱关系都没有，所以调用toggleDeleteModalDisplay()自然不会有任何效果。

核心问题拆解 #

你之前的构造函数注入代码：

constructor(public deleteUserComponent: DeleteUserComponent) {}

这行代码会让Angular创建一个全新的DeleteUserComponent实例，但这个实例并没有对应页面上的任何DOM元素，修改它的deleteModalDisplay属性当然不会影响页面上的模态框状态。

正确的解决步骤 #

1. 确保DeleteUserComponent在模板中被渲染

首先，在ManageUsersComponent的模板（manage-users.component.html）里，必须存在<delete-user>组件标签，否则页面上根本没有这个模态框的实例：

<!-- 先把删除用户组件放到模板里 -->
<delete-user></delete-user>

<!-- 你的删除触发按钮 -->
<button (click)="deleteUser()">Delete Selected User</button>

2. 使用ViewChild获取实际的组件实例

把ManageUsersComponent的代码改成用ViewChild来获取模板中实际渲染的DeleteUserComponent实例：

import { Component, ViewChild } from '@angular/core';
import { DeleteUserComponent } from './delete-user/delete-user.component';

@Component({
  templateUrl: './manage-users.component.html',
  styleUrls: ['./manage-users.component.less'],
})
export class ManageUsersComponent {
  // 用ViewChild获取模板中的组件实例
  @ViewChild(DeleteUserComponent) deleteUserComponent!: DeleteUserComponent;

  // 构造函数里不需要注入组件了
  constructor() {}

  public deleteUser() : void {
    // 现在调用的是页面上实际存在的组件实例的方法
    this.deleteUserComponent.toggleDeleteModalDisplay();
  }
}

3. 额外检查点

还要确认以下两点，避免其他潜在问题：

• 确保DialogModule已经导入到你的NgModule中（PrimeNG的组件需要导入对应的模块才能使用）：

  import { DialogModule } from 'primeng/dialog';
  
  @NgModule({
    imports: [
      // ...其他导入
      DialogModule
    ],
    declarations: [DeleteUserComponent, ManageUsersComponent]
  })
  export class YourModule {}
  

• 检查模态框的CSS是否有异常，比如是否被其他元素遮挡（可以用浏览器开发者工具查看元素是否存在）。

这样修改后，点击按钮就能正常弹出模态框了！

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