Angular 17开启bindToComponentInputs后@Input默认值失效？求答疑

你的判断是准确的：当开启bindToComponentInputs: true后，若组件输入既未通过URL查询参数传递、父组件也未传入，Angular会显式将该输入设为undefined，覆盖类属性初始化的默认值；同时@Input的transform方法仅在输入值有变更（包括从父组件传入或路由参数更新）时触发，无参数时不会执行，导致两种常规默认值设置方式失效。

以下是两种可行的解决方式：

1. 使用Getter/Setter封装输入属性 #

通过getter和setter拦截输入值，确保默认值生效：

private _foo: string = 'bar';

@Input()
set foo(val: string | undefined) {
  this._foo = val ?? 'bar';
}

get foo(): string {
  return this._foo;
}

这种方式能直接拦截所有输入赋值（包括路由绑定的undefined），始终保证属性值不为undefined。

2. 在生命周期钩子中补全默认值 #

利用组件初始化钩子，在组件启动阶段检查并设置默认值：

@Input() foo: string | undefined;

ngOnInit(): void {
  // 仅当输入未被赋值时设置默认值
  if (this.foo === undefined) {
    this.foo = 'bar';
  }
}

如果路由参数可能在组件生命周期中动态更新，需要额外在变更钩子中处理：

ngOnChanges(changes: SimpleChanges): void {
  if (changes['foo'] && changes['foo'].currentValue === undefined) {
    this.foo = 'bar';
  }
}

额外提示 #

如果需要批量处理多个输入属性，可以封装一个工具函数，在ngOnInit/ngOnChanges中统一校验赋值，避免重复代码。

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