顯示的子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是雙方父母和孩子的路線名稱在你的代碼中。