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可以正确显示（但仍未使用角度路由）。

当我用<router-outlet></router-outlet>替换app.component.html中的上述代码时，我遇到的问题是仅显示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个部分都不显示？

如何指定要在目标网页上显示的组件的角度？。

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>

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

角形6路由器出口仅显示第一个组件

1 个答案: