Angular /admin 路由的路由器出口

Question

您好，我对 Angular 很陌生，我正在尝试构建包含多个路由的网页。

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

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

Angular /admin 路由的路由器出口

Angular router-outlet for /admin route

angular-routing

angular

angular-router