如何解决如何在角度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'
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。