Angular 18子路由中路由参数绑定至组件输入的问题

嗨，这个问题我之前也碰到过！默认情况下，Angular的bindToComponentInputs只会把当前路由段定义的参数绑定到对应组件的输入上——你的子路由child本身没有声明year和month参数，所以这些父路由的参数不会自动传递给子组件。不过有两种简单的方法可以解决这个问题：

方案一：通过全局路由配置让子组件继承父路由参数 #

你可以在路由模块的配置里加上paramsInheritanceStrategy: 'always'，这样所有子路由都会自动继承父路由的参数，配合已开启的bindToComponentInputs，就能直接在子组件里用输入属性接收参数了。

修改你的RouterModule配置：

RouterModule.forRoot(routes, {
  bindToComponentInputs: true,
  paramsInheritanceStrategy: 'always' // 新增这一行配置
})

然后在ChildComponent里，和父组件一样定义同名的输入属性：

import { input } from '@angular/core';

export class ChildComponent {
  year = input<number>();
  month = input<number>();
}

这样子组件就能直接拿到父路由的year和month参数了。

方案二：通过父组件的router-outlet手动传递参数 #

如果你不想修改全局路由配置，也可以在父组件的router-outlet上手动把参数传递给子组件，这种方式更灵活，也能明确控制哪些参数需要传递：

1. 父组件保持原有的输入属性定义（已经能正常拿到路由参数）：

import { input } from '@angular/core';

export class ParentComponent {
  year = input<number>();
  month = input<number>();
}

2. 修改父组件的模板，在router-outlet上绑定要传递的参数：

<!-- ParentComponent的模板 -->
<router-outlet [year]="year()" [month]="month()"></router-outlet>

3. 最后在ChildComponent里定义对应的输入属性：

import { input } from '@angular/core';

export class ChildComponent {
  year = input<number>();
  month = input<number>();
}

这样子组件就能通过输入属性接收到父组件传递过来的路由参数了。

小提醒 #

• 一定要保证子组件的输入属性名和你传递的参数名完全一致，Angular的输入绑定是严格匹配名称的。
• 如果使用第一种全局配置方案，要注意paramsInheritanceStrategy: 'always'会让所有子路由都继承父路由参数，如果你有不需要继承参数的子路由场景，可能需要单独调整路由配置。

内容来源于stack exchange