Question

我有一个关于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>

谢谢

Answer 1

您需要创建一个称为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'
},

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

1 个答案: