Angular 18子路由参数无法通过withComponentInputBinding绑定求助

你的嵌套路由配置中，:operation和:id是子路由（CrudComponent）的路径参数，这些参数属于子路由组件，而你在父组件TestComponent中声明的@Input()只能获取父路由自身的参数，所以自然无法拿到值。而扁平路由配置中，参数直接绑定在TestComponent的路由上，因此能正常获取。

根据你的业务需求，有两种处理方式：

方式1：将参数绑定移到子组件（推荐） #

如果TestComponent仅作为路由容器，参数的展示/业务逻辑属于CrudComponent，直接把@Input移到子组件即可：

1. 修改crud.component.ts：

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

@Component({
  selector: 'app-crud',
  templateUrl: './crud.component.html'
})
export class CrudComponent {
  @Input() operation: string = "";
  @Input() id: number = 0;
}

2. 修改crud.component.html：

operation={{operation}}   id={{id}}

3. 更新test.component.html（添加<router-outlet>渲染子组件）：

<a [routerLink]="['/test']">no operation</a>-
<a [routerLink]="['/test','onlyoperation']">only operation</a>-
<a [routerLink]="[ '/test','operationNid','123']">operation and id</a>
<hr/>
<router-outlet></router-outlet>

方式2：父组件手动获取子路由参数 #

如果必须在TestComponent中使用这些参数，可以通过ActivatedRoute订阅子路由的参数变化：

修改test.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { map } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
  operation: string = "";
  id: number = 0;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听子路由的参数变化
    this.route.firstChild?.paramMap.pipe(
      map((params: ParamMap) => ({
        operation: params.get('operation') || '',
        id: params.get('id') ? Number(params.get('id')) : 0
      }))
    ).subscribe(data => {
      this.operation = data.operation;
      this.id = data.id;
    });
  }
}

同时确保test.component.html中保留<router-outlet>，否则子路由组件无法渲染，参数也不会存在。

补充说明 #

嵌套路由的核心逻辑是：父路由组件作为容器，通过<router-outlet>渲染子路由组件，子路由的路径参数仅属于子组件。如果不需要这种层级结构，直接使用你能正常工作的扁平路由配置即可。

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