如何在角度9中添加多条路线

问题描述

我有一个关于angular 9的项目，我想在我的首页中执行三个组件，分别名为header，body和footer。我还有另外两个组件login和signup。这些工作正常，但是主页组件不起作用。只有header个组件正在加载，其他的则没有。我发现了类似的问题，但不能解决我的问题

我尝试过的事情

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { LoginComponent } from './component/login/login.component';
import { SignupComponent } from './component/signup/signup.component';
import { HeaderComponent } from './component/header/header.component';
import { BodyComponent } from './component/body/body.component';
import { FooterComponent } from './component/footer/footer.component';

const routes: Routes = [
  {
    path: '',redirectTo: 'header,body,footer',pathMatch: 'full'
  },{
    path: 'header',component:HeaderComponent
  },{
    path: 'body',component:BodyComponent
  },{
    path: 'footer',component:FooterComponent
  },{
    path: 'login',component:LoginComponent
  },{
    path: 'signup',component:SignupComponent
  }
];

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

app.component.html

<router-outlet></router-outlet>

谢谢

解决方法

您需要创建一个称为home组件的通用组件，并在其中包含页眉，正文，页脚

home.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

路线

{
   path: 'home',component:HomeComponent
},{
    path: '',redirectTo: 'home',pathMatch: 'full'
},