未使用 withComponentInputBinding 设置子路由参数

Question

在 Angular 18 应用程序中，我无法设置子路由参数。

我的路线定义为

export const routes: Routes = [
  { path: 'test',
    children: [
       { path: ':operation/:id', component: CrudComponent },
       { path: ':operation', component: CrudComponent},
       { path: '', component: CrudComponent }
    ], component: TestComponent},

在app.config.ts中

  export const appConfig: ApplicationConfig = {
   providers: [provideRouter(routes,  withComponentInputBinding()),

在 test.component.html 中

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

在 test.component.ts 中

  @Input() operation:string="";
  @Input() id:number=0;

我希望看到“operation={{operation}} id={{id}}”显示的值，但它们仍然是空白。

如果我定义以下路线，它会按预期工作

export const routes: Routes = [
  { path: 'test/:operation/:id', component: TestComponent },
  { path: 'test/:operation', component: TestComponent },
  { path: 'test', component: TestComponent},

我哪里错了？

Answer 1

您定义的

@Input

当您直接在路线

:operation/:id

上设置它时才起作用，因此只有这样它才能访问输入绑定，否则就不能。

您必须寻找其他方法来从父级访问这些属性。