Angular 2爲所有後代使用頂級路由器插座

我有一個頂級組件，其中包含用戶可以訪問的所有功能，如帳戶或配置文件頁面，還包含具有其自己的子頁面的功能。我用這種方法得到了一個深度嵌套的路由樹，但是我現在不希望在視圖上表示相同的結構。每個組件的內容都應該顯示在UserComponent的HTML中包含的頂級路由器插座中。簡而言之，應該將用戶的簡檔信息（/用戶/簡檔）和用戶的第9商店（/user/shop/9 /創建）的產品創建轉發到完全相同的路由器插座。Angular 2爲所有後代使用頂級路由器插座

這是我APP-routing.modules.ts相關的部分看起來像現在：

path: 'user', 
component: UserComponent, 
canActivate: [AuthenticationGuard], 
canActivateChild: [AuthenticationGuard], 
children: [ 
    { 
    path: '', 
    redirectTo: '/user/profile', 
    pathMatch: 'full' 
    }, 
    { 
    path: '*', 
    redirectTo: '/user/profile', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'account', 
    component: AccountComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent 
    }, 
    { 
    path: 'shop', 
    children: [ 
     { 
     path: ':id', 
     component: ShopComponent, 
     children: [ 
      { 
      path: 'stores', 
      component: StoresComponent 
      }, 
      { 
      path: 'modify', 
      component: ShopModifyComponent 
      } 
     ] 
     }, 
     { 
     path: 'create', 
     component: ShopCreateComponent 
     }, 
    ] 
    } 
]

有路線甚至不有分量。例如用戶/商店當前具有含義，但是當提供ID時user/shop/123那麼我想顯示該商店的數據。還有一些路線應該包含多個參數，如user/shop/123/product/321。

我嘗試了所有可以找到的不同配置，創建指定的插座然後調用它們，但通常我得到的錯誤是沒有找到主要插座，或者它無法匹配提供的URL。

有沒有一種簡單的方式告訴所有的後代（無論他們有多深）使用頂級路由器插座？

來源

2017-04-21 barney.balazs

你是什麼意思轉發到同一個路由器插座？它應該是相同的，還是應該重定向？ – Sonne

我的意思是說，與/ user/profile和/ user/shop/9/create路由（例如）關聯的內容應該加載到位於UserComponent的HTML中的同一個標籤。 –

爲什麼不將'UserComponent'指定爲'shop'路由配置？

如果您需要使用兩種不同用途的「用戶組件」（其中一種用於基於用戶的店鋪信息佈局細節），那麼您可以在'用戶組件'模板中有兩個插座並將該另一個插座名稱指定爲'商店'路由配置。

例如，你可以做這樣的

UserComponent

<router-outlet></router-outlet> 
 
<router-outlet name="shop"></router-outlet>

，然後你的路由配置

{ 
 
    path: 'shop', 
 
    component: UserComponent, 
 
    outlet: 'shop', 
 
    children: [ 
 
     { 
 
     path: ':id', 
 
     component: ShopComponent, 
 
     children: [ 
 
      { 
 
      path: 'stores', 
 
      component: StoresComponent 
 
      }, 
 
      { 
 
      path: 'modify', 
 
      component: ShopModifyComponent 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     path: 'create', 
 
     component: ShopCreateComponent 
 
     }, 
 
    ] 
 
    }

如果您不希望在路由到ShopComponent時顯示任何內容，那麼您可以只在其中放置標籤「router-outlet」而沒有其他內容。

來源

2017-09-07 16:38:52

Angular 2爲所有後代使用頂級路由器插座

回答

相關問題