在 Angular 17+ 中，如何将 signal<number | undefined> 传递给子组件输入信号<number>？

Question

假设我分别有两个父组件和子组件：

父组件：

@Component({
selector: 'app-parent',
template: `<app-child [id]="id()"></app-child>`, // this gives compilation error
standalone: true
})
export class ParentComponent {
  id = signal<number | undefined>;
}

子组件：

@Component({
selector: 'app-child',
standalone: true
})
export class ChildComponent {
  id = input.required<number>();
}

由于子组件不接受未定义的值，因此会出现以下错误： 输入“数字| undefined' 不能分配给类型 'number'。

1. 我尝试将子元素包装在@if (id() !== undefined) {}中。但它仍然给出相同的错误，因为它是一个信号，因此可以在不同的时间点给出不同的值。

2. 我尝试创建 @let 变量并尝试将其传递给子组件，但 Angular 不允许传递此类临时变量。

Answer 1

您可以利用新的

@let

来获得必要的类型缩小

@let myId = id();

if(myId) {
   <app-child [id]="myId"></app-child>
}