Angular 5中跨组件使用ng-content遇到异常问题求助

先来看你给出的FooterComponent代码，模板里用了带select属性的ng-content，这大概率是问题的关键点所在。我帮你拆解下常见的误区和解决办法：

你的FooterComponent代码回顾 #

模板文件 footer.component.html

<div class="footer">
  <ng-content select="footer"></ng-content>
</div>

组件类文件 footer.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

最可能的问题：父组件调用方式不匹配select选择器 #

你给ng-content加了select="footer"，这意味着只有父组件中包裹在<footer>标签里的内容才会被投影到这个插槽中。如果父组件是这么写的，内容肯定不会显示，看起来就像“异常”：

<!-- 错误写法：没有用<footer>包裹内容 -->
<app-footer>
  这是我的页脚内容
</app-footer>

修正方式1：匹配select选择器的调用

父组件必须把要投影的内容放在<footer>标签内：

<app-footer>
  <footer>
    这是会被正确投影的页脚内容
  </footer>
</app-footer>

修正方式2：使用默认插槽（不需要指定选择器）

如果不需要限定特定元素，只想把父组件传入的所有内容都投影进来，直接去掉select属性即可：
修改FooterComponent的模板：

<div class="footer">
  <ng-content></ng-content>
</div>

父组件直接写内容就能生效：

<app-footer>
  这是直接投影的页脚内容
</app-footer>

进阶：多具名插槽的用法

如果需要在页脚里分多个区域投影内容，可以用属性选择器来定义不同插槽：
FooterComponent模板：

<div class="footer">
  <div class="footer-left">
    <ng-content select="[footer-left]"></ng-content>
  </div>
  <div class="footer-right">
    <ng-content select="[footer-right]"></ng-content>
  </div>
</div>

父组件调用时给元素加对应属性：

<app-footer>
  <div footer-left>页脚左侧内容</div>
  <div footer-right>页脚右侧内容</div>
</app-footer>

额外检查点 #

如果还是有问题，你可以排查下这几点：

• 确认FooterComponent已经正确声明在你的Angular模块的declarations数组中
• 检查是否有CSS样式把投影内容隐藏了（比如display: none或者opacity: 0）
• 检查拼写错误：比如组件选择器app-footer是否写错，select属性里的标签名是否正确

内容的提问来源于stack exchange，提问作者Ibrahim Osama