/ 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}
   ]
 }
]