Angular4：路由器，兒童（可選）參數

匹配/：頁/：團隊/：賽季

其中：團隊：賽季都是可選的參數，所以我可以有一個像

matches/results/4/2017 or 
matches/results/4 or 
matches/results

的URL都應該是有效的，並在this.route.snapshot.params

來通過

我嘗試這樣做：

{path: 'matches', children: [ 
    {path: '', pathMatch: 'full', redirectTo: 'fixtures'}, 
    {path: 'competitions', component: CompetitionsPageComponent}, 
    {path: ':page', component: PageComponent, children: [ 
     {path: ':team', children:[ 
      {path: ':season', children:[]} 
     ]} 
    ]}, 
    ]},

，沒有運氣，只有：頁面出現過的PARAM

來源

2017-06-08 DS_web_developer

多少價值可以：有嗎？這真的是一個路線參數，或者只是你的路線中的一個子路徑？ –

接下來的問題是，你想調整你提到的路線作爲嵌套路線或兄弟姐妹嗎？ –

因此，：pager可以有兩個指向PageComponent ...比賽（即在同一級別上）的其他值（結果/裝置）指向另一個組件.....並且頁面將有2個參數（/團隊/季節）後來在另一個（比賽）......他們都是PageComponent的一部分......上面列出的路徑說明了我想要達到的邏輯.....如果我做了匹配/ results/7/2016 ....我想從快照參數中獲得：{page：'results'，team：7，season：2016} ...在上述路線和設置中，我只獲得{page：'結果} –

我想你想要的是你真的想要兒童路線或只是相同的頁面或每個級別？另一個例子最終將渲染這兩個組件......這可能是你想要的，但如果不是，那麼你可以拼出每個組件。

{ path: 'matches/results/', component: ResultsComponent, }, 
{ path: 'matches/results/:page/', component: PageComponent, }, 
{ path: 'matches/results/:page/:team/', component: TeamComponent, }, 
{ path: 'matches/results/:page/:team/:season', component: PageComponent, },

也注意到您在路徑中使用的名字是你需要在參數選擇使用的名稱：

params['page'] 
params['team'] 
params['season']

示例代碼

this.route.params.subscribe((params) => { 
    this.teamService.getTeam(params['team']).subscribe((team) => { 
     this.team = team; 
    }); 
});

來源

2017-06-08 13:26:27

是的，這是我想要的......好吧，有點...但謝謝 –

考慮以下結構：

const paths: Routes = [ 
    { 
    path: 'matches', 
    children: [ 
     { path: '', pathMatch: 'full', redirectTo: 'fixtures' }, 
     { path: 'fixtures', component: FixturesComponent }, 
     { path: 'competitions', component: CompetitionsPageComponent }, 
     { 
     path: ':page', 
     component: PageComponent, 
     children: [ 
      { 
      path: ':team', 
      component: TeamComponent 
      children: [ 
       { 
       path: ':season', 
       component: SeasonComponent, 
       children: [ 

       ] 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    } 
];

這取決於組件你注入ActivatedRoute，您將能夠訪問不同的路由參數。例如

如果您在SeasonComponent注入ActivatedRoute並執行以下操作：

this._route.params.subscribe(p => console.log(JSON.stringify(p)));

你會看到由頁，團隊和季節屬性的對象。

如果你對PageComponent做同樣的事情，你會得到一個只有一個屬性頁面的對象。如果你明白了，如果你在TeamComponent中注入ActivatedRoute，那麼參數只有2個屬性。

，你聽的路由器事件，然後閱讀在ActivatedRoute實例的屬性不有所作爲，因爲注入ActivatedRoute類的實例事實上包含只參數是當存在於路線在生成了實例被注入的組件的時刻。

所以基本上，至少採用這種方法，不可能從組件層次結構中的某個級別的組件進行訪問，以便進一步向下路由參數。

希望它有幫助！

來源

2017-06-08 13:11:37

@ user2623919答案足夠接近。 ..

這是爲我工作......所有路由指向同一個PageComponent和我的PARAMS我得到我設置的.... 這樣

{path: 'matches', children: [ 
    {path: '', pathMatch: 'full', redirectTo: 'fixtures'}, 
    {path: 'competitions-table', component: CompetitionsPageComponent}, 
    {path: ':page', component: PageComponent}, 
    {path: ':page/:team', component: PageComponent}, 
    {path: ':page/:team/:competition', component: PageComponent}, 
    {path: ':page/:team/:competition/:season', component: PageComponent} 
]},

/比賽/結果

給我PARAMS {page: 'results'}和

/比賽/結果/ 20

給我params {page: 'results', team: '20'}等

乾杯傢伙

來源

2017-06-08 14:23:44

是的，這就是爲什麼我問你是否想要組件嵌套路徑或只是兄弟姐妹：P –

Angular4：路由器，兒童（可選）參數

回答

相關問題