如何在 angular 网站的一部分上使用标准 header/footers？

Question

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

/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

我想不通的是如何在 pub.component.ts 中放置一个页眉/页脚，它由 aboutus.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 {
  }
}

Answer 1

您需要让 aboutus 部分成为 pub 的子路由，以便 router-outlet 显示组件的内容，同时保持 header/footer 来自父组件。

Stackblitz example - 将路径更改为 /a/b 以测试

如何在 angular 网站的一部分上使用标准 header/footers？

How can I have standard header/footers on part of an angular website?

angular-routing

angular

angular-router