Question

我正在创建一个嵌套路由，当我尝试访问带有params的链接并从子路径查询时，它显示为http://localhost:3000/test/test/TestingId;param1=value1而不是http://localhost:3000/test/test/TestingId?param1=value1

以下是我的父路线定义：

@RouteConfig([
  {path: '/', component: RootComponent, name: 'RootCmp' },
  {path: '/test/...', component: NestedComponent, name: 'NestCmp', data: {isAdmin: true} }
])

@Component({
  selector: 'main-app',
  template:` 
      <h1>Using Router and Router Config</h1>
      <a [routerLink]="['RootCmp']">Home</a> | 
      <a [routerLink]="['NestCmp']">Nested Route Test</a> 
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES, RouterLink]
})

我的孩子路线定义是这样的：

@RouteConfig([
  {path: '/', component: SecComponent, name: 'NestCmp', useAsDefault:true },
  {path: '/test/:id', component: SecComponent, name: 'NestChildCmp', data: {isAdmin: true} },
])

@Component({
  selector: 'child-app',
  template:` 
      <h1>Using Router and Router Config</h1>
      <a [routerLink]="['./NestCmp', {'param1': 'value1'}]">Nested Home</a> |
      <a [routerLink]="['NestChildCmp', { 'id': 'TestingId', 'param1': 'value1'}]">Nested Route Test</a> 
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES, RouterLink]
})

Answer 1

您在param1中使用的路径中未定义

@RouteConfig。我假设这是一个可选参数，您将从以下代码获得的最终URL将是。

http://localhost:3000/test/test/testingId

或

http://localhost:3000/test/test/testingId/value1

在您的子组件中尝试此操作

@RouteConfig([
  {path: '/', component: SecComponent, name: 'ChildCmp', useAsDefault:true },
  {path: '/test/:id', component: SecComponent, name: 'NestChildCmp1', data: {isAdmin: true} },
  {path: '/test/:id/:param1', component: SecComponent, name: 'NestChildCmp2', data: {isAdmin: true} },
])

@Component({
   selector: 'main-app',
   template:` 
     <h1>Using Router and Router Config</h1>
     <a [routerLink]="['./NestCmp', 'NestChildCmp1', {'id': 'testingId'}]">Nested Home</a> |
     <a [routerLink]="['./NestCmp', 'NestChildCmp2', { 'id': 'testingId', 'param1': 'value1'}]">Nested Route Test</a> 
     <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES, RouterLink]
  })

同时保留不同路由的不同名称，例如NestCmp是代码中父路由和子路由的名称。

子URL查询参数显示;而不是＆amp;

1 个答案: