要在Angular 8中将一个组件在页头和页脚之间进行路由显示,你可以按照以下步骤进行操作:
首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。
在你的项目中创建一个新的组件,用于显示在页头和页脚之间的内容。你可以使用以下命令来创建一个新的组件:
ng generate component HeaderFooterComponent
在你的应用程序的路由配置文件(通常是app-routing.module.ts)中定义路由。你可以使用以下代码示例:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeaderFooterComponent } from './header-footer/header-footer.component';
const routes: Routes = [
{ path: '', component: HeaderFooterComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在你的应用程序的根模块文件(通常是app.module.ts)中导入并添加路由模块。你可以使用以下代码示例:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderFooterComponent } from './header-footer/header-footer.component';
@NgModule({
declarations: [
AppComponent,
HeaderFooterComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在你的应用程序的根组件模板(通常是app.component.html)中添加一个路由出口。你可以使用以下代码示例:
最后,在你的页头组件模板和页脚组件模板中添加相应的HTML内容。
现在,当你启动你的应用程序时,页头和页脚之间的内容将显示为你的组件。