angular 6 路由器插座仅显示第一个组件

Question

我正在努力将 HTML5 模板转换为 Angular 6 SPA。 HTML5 模板有 7 个部分，我已将它们转换为 7 个组件：主页、关于、图库、服务、客户、推荐和定价。

在 app.component.html 我有：

<app-header></app-header>
<app-about></app-about>
<app-gallery></app-gallery>
<app-services></app-services> 
<app-testimonials></app-testimonials>     
<app-clients></app-clients>
<app-pricing></app-pricing>
<app-footer></app-footer>

SPA 显示正确（但仍不使用角度路由）。

当我将 app.component.html 中的上述代码替换为 <router-outlet></router-outlet> 时，我遇到的问题是只有 header.component.html 出现。

app-routing.module.ts如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '../../node_modules/@angular/router';

import { HeaderComponent } from './header/header.component';
import { AboutComponent } from './about/about.component';
import { GalleryComponent } from './gallery/gallery.component';
import { ServicesComponent } from './services/services.component';
import { ClientsComponent } from './clients/clients.component';
import { TestimonialsComponent } from './testimonials/testimonials.component';
import { PricingComponent } from './pricing/pricing.component';

const routes: Routes = [
  {path:'', redirectTo:'/home', pathMatch: 'full'},
  {path:'home', component: HeaderComponent},
  {path:'about', component: AboutComponent},
  {path:'gallery', component: GalleryComponent},
  {path:'services', component: ServicesComponent},
  {path:'clients', component: ClientsComponent},
  {path:'testimonials', component: TestimonialsComponent},
  {path:'pricing', component: PricingComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  declarations: [],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的问题是：为什么<router-outlet></router-outlet> 只显示标题组件而没有显示其他 6 个组件？。

我如何指定 Angular，我想在登录页面中显示哪些组件？。

Answer 1

当您使用router-outlet 并按照您的方式设置路由配置时，路由器将一次在该路由器插座中显示一个组件的模板。

如果您想一次显示所有组件，请将代码保留原样。你不需要路由。

如果您确实想一次显示一个组件，则需要某种机制来确定何时显示哪个组件的模板。

例如，在我的代码中，我有一个菜单和一个路由器插座：

<nav class='navbar navbar-expand navbar-light bg-light'>
    <a class='navbar-brand'>{{pageTitle}}</a>
    <ul class='nav nav-pills'>
      <li><a class='nav-link' [routerLink]="['/welcome']">Home</a></li>
      <li><a class='nav-link' [routerLink]="['/products']">Product List</a></li>
    </ul>
</nav>
<div class='container'>
  <router-outlet></router-outlet>
</div>

当用户选择一个菜单选项时，我会在路由器插座中显示该菜单选项的组件模板。在此示例中主页或产品列表。