Angular 16：路由数据作为组件输入失效问题求助

你的问题出在Angular 16默认未启用路由数据与组件输入的自动绑定，需要在路由配置中显式开启该功能。

问题原因 #

Angular 16中，路由的data静态数据和resolve解析数据不会自动映射到组件的@Input属性，必须通过bindToComponentInputs配置项手动开启这个特性。

解决方法 #

在对应的路由对象中添加bindToComponentInputs: true即可：

@Component({
  template: `
    resolveData: {{resolveA}} <br>
    data : {{ dataA }}
  `,
})
class MyComponent {
  @Input() resolveA?: string;
  @Input() dataA?: string;
}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <h1>Hello from {{name}}!</h1>

    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideRouter(
      [
        {
          path: '**',
          component: MyComponent,
          data: { dataA: 'My static data' },
          resolve: { resolveA: () => 'My resolved data' },
          // 开启路由数据与组件输入的绑定
          bindToComponentInputs: true
        },
      ],
    ),
  ],
});

添加该配置后，路由的dataA会自动绑定到组件的@Input() dataA，resolve返回的resolveA也会绑定到@Input() resolveA，组件就能正常展示数据了。

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