如何让Angular的withComponentInputBinding保留输入初始值？

当你在Angular的app.config.ts中启用withComponentInputBinding()后，路由组件的输入绑定逻辑会改变——只要路由配置里未明确指定输入参数，Angular会主动给所有输入属性传递undefined，直接覆盖它们的初始值。这是该特性的默认行为，目前没有官方配置项能直接修改这个逻辑，但可以通过两种方式绕过：

1. 用输入属性的默认值语法兜底 #

对于各类输入属性，直接在声明时设置默认值，确保未传入值时保留初始状态：

// @Input 示例
@Input() title: string = '默认标题';
@Input() count?: number = 10;

// Signal Input 示例
title = input('默认标题');
count = input(10, { alias: 'itemCount' });

// Model 示例
title = model('默认标题');

这种方式最直接，不管路由是否传递参数，都能保证属性有初始值。

2. 在路由守卫中动态控制输入参数 #

如果需要批量处理多个路由输入，可以在路由守卫中判断参数是否存在，仅当参数有效时才传递：

@Injectable({ providedIn: 'root' })
export class InputGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 以title属性为例，移除空值参数避免传递undefined
    if (route.data['title'] === undefined) {
      delete route.data['title'];
    }
    return true;
  }
}

// 路由配置中使用守卫
const routes: Routes = [
  {
    path: 'example',
    component: ExampleComponent,
    canActivate: [InputGuard],
    data: { title: undefined }
  }
];

需要注意的是，withComponentInputBinding()的设计初衷是实现路由参数与组件输入的强绑定，所以官方暂时没有提供“跳过undefined传递”的配置。如果你的场景依赖大量输入初始值，优先用第一种兜底方式更高效。

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