Angular 15中p-dialog无法通过组件选择器渲染跨模块组件

在nursing-audit.module模块下的audit2.component组件中，尝试通过PrimeNG的p-dialog渲染variance.module模块内的urc.component组件。目前p-dialog可正常打开并显示头部内容，但使用<app-urc>选择器无法渲染目标组件——该组件在自身所属的variance.module中可正常运行，当前对话框仅显示头部，下方应出现的表格未加载。

相关代码 #

audit2.component.ts #

import { UrcComponent } from "src/app/variance/urc/urc.component";

@Component({
  selector: "app-audit2",
  templateUrl: "./audit2.component.html",
  styleUrls: ["./audit2.component.css"],
  providers: [MessageService]
})

audit2.component.html（p-dialog片段） #

<p-dialog
[(visible)]="individualActivityDialog"
[style]="{ width: '98vw' }"
[maximizable]="true"
[resizable]="true">
  <p-header>
    <h4>Individual Activity</h4>
    {{ selectedRow["Name"] }} ID:{{ selectedRow["Id"] }}
  </p-header>
    <app-urc></app-urc>
</p-dialog>

nursing-audit.module.ts #

// ...省略其他导入
import { VarianceModule } from '../variance/variance.module';

@NgModule({
  declarations: [/* 组件列表 */],
  imports: [
    // ...其他导入
    VarianceModule
  ],
  // ...其他配置
})
export class NursingAuditModule { }

urc.component.ts #

@Component({
  selector: "app-urc",
  templateUrl: "./urc.component.html",
  styleUrls: ["./urc.component.css"],
  providers: [MessageService, ConfirmationService],
})
export class UrcComponent implements OnInit {
  varianceNodes: TreeNode[] = [];
  commentDialog: boolean = false;
// ...其他代码
}

variance.module.ts #

@NgModule({
  declarations: [/* 包含UrcComponent */],
  imports: [/* 依赖模块 */],
  // ...其他配置
})
export class VarianceModule { }

核心问题是VarianceModule未对外暴露UrcComponent组件。Angular模块规则：只有添加到exports数组的组件、指令、管道，才能被其他导入该模块的模块调用。

修改variance.module.ts，将UrcComponent加入exports数组：

@NgModule({
  declarations: [UrcComponent /* 其他组件 */],
  imports: [/* 依赖模块 */],
  exports: [UrcComponent] // 暴露组件给外部模块使用
})
export class VarianceModule { }

完成修改后，NursingAuditModule导入VarianceModule即可正常识别并渲染<app-urc>组件。

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