Ionic Angular复用组件编辑不同类数据的条件渲染问题

问题根源 #

你的TypeCheckService中的类型守卫方法逻辑完全失效：所有方法都直接返回user，意味着只要传入的user不为空，isUtenteDTO和isOperatoreDTO都会返回true，导致模板中两个ion-content的条件判断同时成立，最终同时渲染。

解决方案 #

方案一：修复TypeCheckService的类型守卫逻辑

类型守卫需要通过DTO的独有属性来区分不同类型，比如假设OperatoreDTO包含嵌套的Utente对象，而UtenteDTO直接拥有Nome、Cognome等属性。修改后的服务代码如下：

@Injectable({
  providedIn: 'root'
})
export class TypeCheckService {

  constructor() { }
  
  public isUtenteDTO(user: any): user is UtenteDTO {
      // 基于UtenteDTO的独有特征判断：存在直接的Nome属性，且无嵌套Utente对象
      return user && typeof user.Nome === 'string' && !user.Utente;
  }

  public isOperatoreDTO(user: any): user is OperatoreDTO {
      // 基于OperatoreDTO的独有特征判断：存在嵌套的Utente对象
      return user && user.Utente && typeof user.Utente.Nome === 'string';
  }

  public isPazienteDTO(user: any): user is PazienteDTO {
      // 补充PazienteDTO的独有属性判断逻辑
      return user && /* 此处添加PazienteDTO的特征判断 */;
  }

  public isUtenteDTONew(user: any): user is UtenteDTONew{
      // 补充UtenteDTONew的独有属性判断逻辑
      return user && /* 此处添加UtenteDTONew的特征判断 */;
  }

  public isOperatoreDTONew(user: any): user is OperatoreDTONew{
      // 补充OperatoreDTONew的独有属性判断逻辑
      return user && /* 此处添加OperatoreDTONew的特征判断 */;
  }
}

方案二：直接使用已传入的userType做条件判断

既然组件已经通过@Input接收了userType参数，完全可以直接用它做模板的条件渲染，无需依赖类型守卫，逻辑更简单可靠：
修改模板代码：

<ion-header>
    <ion-toolbar>
        <ng-container *ngIf="userType === 'utente'">
            <ion-title>Modifica Utente</ion-title>
        </ng-container>
        <ng-container *ngIf="userType === 'operatore'">
            <ion-title>Modifica Operatore</ion-title>
        </ng-container>
        <ion-buttons slot="end">
            <ion-button (click)="dismissModal()">Chiudi</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content *ngIf="userType === 'utente'">
    <!-- Utente表单内容 -->
</ion-content>

<ion-content *ngIf="userType === 'operatore'">
    <!-- Operatore表单内容 -->
</ion-content>

额外优化建议 #

1. 修复组件中无效的类型断言：
   你的ngOnInit方法中，this.user as OperatoreDTO;这类代码没有赋值，是无效的类型断言，可修改为：

   ngOnInit(): void {
       if (this.userType === 'operatore') {
           console.log("operatore");
           const operatore = this.user as OperatoreDTO;
           // 此处可添加Operatore类型的初始化逻辑
       } else if (this.userType === 'utente') {
           console.log("utente");
           const utente = this.user as UtenteDTO;
           // 此处可添加Utente类型的初始化逻辑
       } else {
           console.error('Unsupported user type');
       }
   }
   

2. 使用枚举替代字符串硬编码：
   定义UserType枚举避免字符串拼写错误：

   export enum UserType {
     UTENTE = 'utente',
     OPERATORE = 'operatore',
     PAZIENTE = 'paziente'
   }
   
   // 组件中修改@Input类型
   @Input() userType: UserType;
   

   调用组件时使用枚举值：

   async editDettagliUtente(user: UtenteDTO) {
       const modal = await this.modalController.create({
           component: EditutenteComponent,
           componentProps: {
               user: user,
               userType: UserType.UTENTE
           }
       });
       return await modal.present();
   }
   

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