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

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>为止。页眉和页脚文件仅包含一些文本作为占位符，那里没什么特别的。但是当我更改那一行时，页眉和页脚也消失了。