angular - 路由器插座在自定义组件中不起作用

Question

我刚开始开发一个新的 Angular 应用程序。它需要出现在每个页面上的页眉和页脚，所以我继续创建了 3 个组件：布局、页眉和页脚。

然后我继续并将我的更改app.component.html为<app-layout></app-layout>

布局组件本身如下：

<app-header></app-header>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

和

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这一切都奏效了，直到我继续前进并更改<ng-content>为<router-outlet>. 页眉和页脚文件只包含一些文本作为占位符，没有什么特别之处。但是当我更改那一行时，页眉和页脚也消失了。

标签： angular