Angular - 超過 1 條路線如何組織

Question

我正在嘗試為一個新項目組織我的應用程序組件，但我在 Angular 8 中遇到了一些路由問題：

一般來說，我有一個登陸頁面，這是我的第一頁。 當我想在登陸頁面登錄時，我想在不使用主路由器插座的情況下將用戶重定向到 /login ：如下所示：

    const routes: Routes = [
      { path: '', component: MainComponent },
      { path: 'signup', component: SignupComponent },
      { path: 'login', component: LoginComponent },
      { path: '**', component: PageNotFoundComponent },
     ]

這是我的 AppComponent：

<app-top-nav-bar></app-top-nav-bar> <router-outlet></router-outlet> <app-footer></app-footer>

現在我想知道，如何在 MainComponent 中添加第二個路由器。 當我打開應用程序時，我想看到帶有自己的模塊和路由器的 mainComponent。 我有第二個模塊和路由器。 我想模塊化我的應用程序：請參閱此https://dzone.com/articles/howto-modularize-an-angular-application-by-example

Answer 1

它應該是

<router-outlet></router-outlet>

嘗試將您的組件更改為

<topnavbar></topnavbar>
<router-outlet></router-outlet>
<footer></footer>

Answer 2

如果我正確理解了這個問題，您可以使用children ：

const routes: Routes = [
  { path: '', component: MainComponent, 
    children: [ 
      { path: '', redirectTo: 'mypath', pathMatch: 'full' }
      { path: 'mypath', component: MyComponent }
    ] 
  },
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent },
]

然后只需在MainComponent html中您希望顯示子組件的位置添加一個<router-outlet></router-outlet>標記。