/admin路由的角度路由器出口

Question

嗨，我对Angular很陌生，我正在尝试构建由多个路由组成的网页。

我想建立一个可以从/admin url访问的管理面板。当我访问/admin时，我希望只显示AdminPageComponent，而不是我用于所有其他URL的app.component.html中的页眉和页脚组件。我试图用多个路由器插座来解决这个问题，但我找不到一个能以我想要的方式工作的解决方案。对于我的情况，有什么好的解决方案吗？

{ path: '', component: HomePageComponent },
{ path: 'hockey', component: HockeyPageComponent },
{ path: 'football', component: FootballPageComponent },
{ path: 'tennis', component: TennisPageComponent },
{ path: 'other', component: OtherPageComponent },
{ path: 'stats', component: StatsPageComponent },
{ path: 'results', component: ResultsPageComponent },
{ path: 'login', component: LoginPageComponent },
{ path: 'articles/:id', component: ArticlePageComponent},
{ path: 'register', component: RegisterPageComponent},
{ path: 'admin', component: AdminPageComponent},
{ path: '**', redirectTo: ''} 

我的app.component.html看起来像这样：

<app-navigation></app-navigation>
<main role="main">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 reklama">
<p>Reklama left</p>
</div>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
<router-outlet></router-outlet>
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 reklama">
<p>Reklama right</p>
</div>
</div>
</main>
<app-footer></app-footer>

Answer 1

您的AppComponent应该只包含在所有组件之间共享的内容。如果所有组件之间没有共享内容，则AppComponent的HTML应为<router-outlet></router-outlet>。然后，您可以将子路由添加到路由模块，以添加应用程序的不同共享部分。

例如MainWrapperComponent和AdminWrapperComponent，它们自己的路由器出口被每个部分的共享HTML包围。

在您的路由模块中，您可以设置这样的结构：

const routes = [
// This component defines the shared main content around a router outlet.
{ path: '', component: MainWrapperComponent, children: [
// This component is a main page
{ path: 'home', component: HomeComponent}
]
},
// This component defines the shared admin content around a router outlet.
{ path: 'admin', component: AdminWrapperComponent, children: [
// This component is an admin page
{ path: 'home', component: AdminHomeComponent}
]
}
]