Angular 16如何将组件输入绑定到父路由的路由参数？

完全可以用Angular 16新增的路由参数输入绑定功能实现需求，不需要再手动通过ActivatedRoute在构造函数里赋值。下面提供两种可行方案：

方案一：通过@Input的transform函数直接获取 #

修改some.component.ts的代码，在@Input装饰器里配置transform函数，注入ActivatedRoute来获取父路由的foo参数：

import { Input, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  // 保留原组件元数据
})
export class SomeComponent {
  @Input({
    transform: () => {
      const parentRoute = inject(ActivatedRoute).parent;
      return parentRoute?.snapshot.params['foo'] ?? '';
    }
  }) 
  foo!: string;
}

Angular会在组件初始化时自动执行这个transform函数，把父路由的foo参数赋值给组件的foo属性，无需再写构造函数里的手动赋值逻辑。

方案二：在路由配置中传递父路由参数 #

修改路由配置，在子路由的componentProps里明确传递父路由的foo参数：

import { Routes } from '@angular/router';
import { IrrelevantComponent } from './irrelevant.component';
import { SomeComponent } from './some.component';

export const routes: Routes = [
  {
    path: 'bar/:foo',
    component: IrrelevantComponent,
    children: [
      {
        path: 'some',
        component: SomeComponent,
        componentProps: (route) => ({
          foo: route.parent?.params['foo']
        })
      },
    ],
  },
];

组件侧只需要保留基础的@Input定义即可：

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

@Component({
  // 保留原组件元数据
})
export class SomeComponent {
  @Input() foo!: string;
}

这种方式把参数映射逻辑集中在路由配置里，组件本身更简洁，只负责接收输入。

两种方案都能满足需求，你可以根据项目的代码风格和逻辑封装偏好选择。

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