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>标记。