Angular中如何注入PrimeNG组件并实现ngModel数据绑定？

Angular的[innerHTML]只能解析原生HTML标签，根本不会处理Angular组件（包括PrimeNG的<p-inputSwitch>）。你把组件标签写成字符串转成安全HTML后塞进去，浏览器只会把它当成个陌生标签，不会触发Angular的组件编译流程，自然看不到开关效果。

在表格的<td>里直接根据字段判断渲染内容，不用再依赖那个innerHtmlBindData方法，代码更清晰还能解决问题：

<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
   <tr 
      [ngClass]="{'cursor-pointer hover:bg-gray-50': tabIndex === 0 && currentRoute === '/dashboard/app' && rowData[columns?.[3].field] !== 'edit'}">
      <td 
         *ngFor="let col of columns; let i=index" 
         class="td text-base text-center block"
         (click)="onTDTableClick($event, rowData, rowIndex, col)">
         <!-- 序号列 -->
         <span *ngIf="col.field === 'num'">{{ rowIndex + 1 }}</span>
         <!-- 删除图标 -->
         <span *ngIf="col.field === 'remove'" [innerHTML]="trashIcon"></span>
         <!-- 编辑图标 -->
         <span *ngIf="col.field === 'edit'" [innerHTML]="editIcon"></span>
         <!-- super字段显示文本 -->
         <span *ngIf="col.field === 'super'">{{ rowData[col.field] ? 'بله' : 'خیر' }}</span>
         <!-- 直接渲染开关组件，绑定rowData里的block字段 -->
         <p-inputSwitch *ngIf="col.field === 'block'" [(ngModel)]="rowData[col.field]"></p-inputSwitch>
         <!-- 其他默认字段 -->
         <span *ngIf="!['num','remove','edit','super','block'].includes(col.field)">{{ rowData[col.field] }}</span>
      </td>
   </tr>
</ng-template>

之后你可以删掉原来的switcher变量，以及innerHtmlBindData方法里对应block字段的处理逻辑，简化代码。

• 务必在你的模块中导入InputSwitchModule，否则PrimeNG的开关组件依旧无法正常渲染。
• 如果以后遇到需要动态加载不同组件的场景，再考虑用Angular的ComponentFactoryResolver或ViewContainerRef实现，但当前表格场景用条件渲染就足够，没必要搞复杂。

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