angular - 如何在 Angular 网站的一部分上设置标准页眉/页脚？

Question

我们正在开发一个具有公共/保护区的网站，其中页眉和页脚不同。

/src
   /app
       app.module.ts
       app-routing.ts
       app.component
       /pub
           pub.component.ts
           pub-routing.module.ts
           pub.module.ts
           /aboutus
              aboutus.component.ts
       /priv
           priv.component.ts
           priv-routing.module.ts
           priv.module.ts
           /foo
              bar.component.ts

我不知道如何在aboutus.component.ts继承的pub.component.ts中放置页眉/页脚。

如果我导航到 /pub，会显示页眉和页脚，但转到 /pub/aboutus 只会显示该组件中的内容。

-------------
pub.module.ts
-------------

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PubRoutingModule } from './pub-routing.module';
import { PubComponent } from './pub.component';

@NgModule({
  declarations: [
    PubComponent
  ],
  imports: [
    CommonModule,
    PubRoutingModule
  ],
  exports: [
    PubRoutingModule
  ]
})
export class PubModule { }

---------------------
pub-routing.module.ts
---------------------

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PubComponent } from './pub.component';
import { AboutUsComponent } from './aboutus/aboutus.component';
const rootRoutes: Routes = [
  { path: 'pub', component: PubComponent },
  { path: 'pub/aboutus', component: AboutUsComponent }
];
@NgModule({
  declarations: [AboutUsComponent],
  imports: [
    RouterModule.forChild(rootRoutes)
  ],
  exports: [RouterModule]
})
export class PubRoutingModule { }

----------------------
pub.component.ts
----------------------

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pub',
  template: `<p>Heading</p><router-outlet></router-outlet><p>Foot</p>`
})
export class PubComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

标签： angularangular-routingangular-router

Answer 1

您需要将aboutus部件设置为子路由，pub以router-outlet显示组件的内容，同时维护父组件的页眉/页脚。

Stackblitz 示例- 更改/a/b测试路径