不使用ngOnChanges复用组件处理新建/现有表单记录时，解决新建模式下表单不显示的问题

嘿，我来帮你搞定这个问题！核心原因其实很简单：你当前的existingFormData$在新建模式下（没有id参数时）不会发出任何值——因为filter(id => !!id)把空id的情况直接过滤掉了，导致父组件里的*ngIf条件始终不成立，子组件根本没被渲染出来，所以新建模式下你看不到表单。

下面是具体的修复步骤：

1. 调整父组件的Observable逻辑，让新建模式下也能发出值 #

修改父组件TS里的existingFormData$，去掉过滤逻辑，换成判断id是否存在的分支处理，在新建模式下发出null：

import { of } from 'rxjs';

existingFormData$: Observable<UniversityApplicationsDetail | null> = this.activatedRoute.params.pipe(
  map(params => params['id']),
  switchMap((id: string | undefined) => {
    // 如果有id，请求现有数据；没有的话，发出null表示新建模式
    return id ? this.httpService.getUniversityApplicationsDetail(id) : of(null);
  })
);

2. 更新父组件模板，移除不必要的非空断言 #

现在Observable始终会输出值（要么是详情数据，要么是null），所以模板里不需要!非空断言了：

<app-university-applications-form
  *ngIf="existingFormData$ | async as detail"
  [existingData]="detail"
></app-university-applications-form>

3. 调整子组件的输入和初始化逻辑 #

更新子组件的@Input类型，允许接收null，然后在ngOnInit里根据数据是否存在区分新建/更新模式：

@Input() existingData: UniversityApplicationsDetail | null = null;

ngOnInit(): void {
  if (this.existingData) {
    this.title.setTitle("Update University Application");
    this.populateForm();
  } else {
    this.title.setTitle("New University Application");
    this.createForm();
  }
}

这样调整后，不管是新建还是编辑模式，父组件都会渲染子组件，子组件也能在ngOnInit里正确执行对应的逻辑，完全不需要依赖ngOnChanges啦！

备注：内容来源于stack exchange，提问作者Andrew Howard