Angular5中ng-content内部按钮渲染失败问题咨询

我来帮你排查这个问题，这类情况通常是样式隔离、投影匹配或者元素隐藏这几个原因导致的，咱们一步步来解决：

1. 样式隔离导致按钮默认样式丢失 #

Angular默认的ViewEncapsulation机制会隔离组件样式，父组件或全局的按钮样式可能无法作用到ng-content投影进来的内容上，导致按钮看起来不像原生按钮（比如没有默认的边框、背景色）。

解决办法： #

• 用::ng-deep穿透样式隔离：在组件的CSS文件中，通过::ng-deep来强制样式作用到投影内容：

::ng-deep my-component button {
  /* 可以还原原生按钮样式，或者自定义样式 */
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

• 将按钮样式放到全局样式文件：比如styles.css，全局样式会作用到所有组件的内容上，包括投影进来的按钮。
• 关闭组件的样式隔离：在组件装饰器中设置encapsulation: ViewEncapsulation.None，注意这样会让组件的样式全局生效，可能导致样式冲突，谨慎使用：

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponentComponent { }

2. ng-content的select属性匹配错误 #

如果你的组件模板中给ng-content加了select属性，比如<ng-content select="[custom-btn]"></ng-content>，但使用组件时没有给按钮添加对应的选择器（属性、类或标签），按钮就不会被正确投影到指定位置，甚至可能不显示。

解决办法： #

• 检查select匹配规则：确保投影内容的选择器和ng-content的select属性一致。比如组件模板用了select=".projected-btn"，那么按钮需要加上对应的类：

<my-component>
  <button class="projected-btn">我的按钮</button>
</my-component>

• 不需要筛选时去掉select属性：如果只是想投影所有内容，直接用<ng-content></ng-content>即可，不要加select。

3. 按钮被组件元素覆盖或隐藏 #

有时候组件内部的布局元素（比如div）可能通过display: none、visibility: hidden或者z-index层级问题，把投影进来的按钮遮挡住了。

解决办法： #

• 用浏览器开发者工具检查：按F12打开开发者工具，切换到Elements标签，找到<my-component>下的按钮元素，查看它的display、visibility、z-index等样式属性，确认是否被隐藏或覆盖。
• 调整组件布局样式：如果是布局问题，修改组件内部元素的样式，确保按钮能正常显示在页面上。

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