Angular 17+中如何将signal<number|undefined>传入子组件的signal<number>输入？

问题场景 #

父组件的Signal类型为number | undefined，子组件通过input.required<number>()要求必须传入非undefined的number类型，直接传递会触发编译错误：Type 'number | undefined' is not assignable to type 'number'。

可行解决方案 #

方案1：派生Signal过滤undefined + @if条件渲染 #

在父组件中创建派生Signal过滤undefined，结合@if的变量绑定语法让模板类型检查正确识别有效值类型：

父组件修改后代码：

@Component({
  selector: 'app-parent',
  template: `
    @if (validId(); as id) {
      <app-child [id]="id"></app-child>
    }
  `,
  standalone: true
})
export class ParentComponent {
  // 修正原代码语法错误：Signal必须传入初始值
  id = signal<number | undefined>(undefined);
  // 派生Signal，过滤undefined后返回number | null
  validId = computed(() => this.id() ?? null);
}

通过@if (validId(); as id)，模板中的id会被推断为number类型，完全匹配子组件的必填输入要求。

方案2：非空断言（谨慎使用） #

若能绝对确保父组件id()在渲染子组件时不会是undefined，可使用非空断言操作符!跳过类型检查：

父组件模板修改：

<app-child [id]="id()!"></app-child>

注意：此方式会绕过类型校验，若后续id()变为undefined，可能引发运行时错误，仅在值始终有效时使用。

方案3：调整父组件Signal初始值（业务允许时） #

如果业务逻辑中id不应出现undefined，直接给Signal设置有效初始值，从根源避免联合类型：

export class ParentComponent {
  id = signal<number>(1); // 初始化为有效number值
}

此时直接传递id()就不会有类型兼容问题。

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