显示的子URL查询参数;而不是与

Question

我创建一个嵌套的路线，并试图从孩子的路由访问使用参数和查询的链接时，显示为的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是双方父母和孩子的路线名称在你的代码中。