創建帶有側邊欄和動態內容/組件的 Angular 項目 - 輔助路由

Question

我很想建立一個包含兩個主要部分的網站。 一次是登錄頁面，一次是帶有子頁面的儀表板。

儀表板應該有一個帶有內容區域的側邊菜單。 各種組件應相應地顯示在內容區域中。

你有什么想法我怎么能做到這一點？ 我首先用輔助路線解決了這個問題。

但是，這樣做的缺點是 URL 現在看起來像這樣：

http://localhost:4200/(login:login)

而且我無法通過“/登錄”訪問該頁面。 這是輔助路線的代碼：

在 app-routing.modules.ts

{
    path: 'login',
    component: LoginComponent,
    outlet: 'login'
},

以及導航到登錄頁面的代碼：

this.router.navigate(['', { outlets: { login: ['login'] } }]);

而app.component.html：

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

我該如何解決 URL 的問題，或者充其量為帶有側面菜單和組件動態內容的模板創建第二個路由器插座？

Answer 1

您可以使用嵌套路由器插座，這將使您的路由保持簡單，然后您也不必在使用路由時提供插座名稱。 嵌套的奧特萊斯提供兩全其美。