Angular中overflow:hidden失效与仅单组件引入Bootstrap的问题咨询

问题1：overflow:hidden 溢出隐藏不生效解决方案 #

• 第一步先确认你设置overflow:hidden的元素是否定义了明确的宽/高，overflow属性仅在元素有固定尺寸、且内容超出尺寸范围时才会触发效果，未设置固定尺寸时该配置不会生效。
• 排查组件宿主元素的布局属性：Angular组件默认生成的<app-xxx>宿主标签默认无块级布局属性，你可以通过两种方式给宿主加配置：
  1. 在组件的CSS文件中使用:host选择器设置：

  :host {
    display: block;
    width: 自定义宽度;
    height: 自定义高度;
    overflow: hidden;
  }
  

  2. 在组件的@Component装饰器中添加host配置：

  @Component({
    selector: 'app-your-page',
    templateUrl: './your-page.component.html',
    styleUrls: ['./your-page.component.css'],
    host: {
      'style': 'display: block; width: 100%; height: 100%; overflow: hidden'
    }
  })
  

• 如果溢出的是脱离文档流的子元素（设置了position: absolute/position: fixed），需要给父级元素加上position: relative，才能让父级的overflow设置对这类子元素生效。
• 可临时添加!important标记排查是否是全局样式优先级覆盖了组件内样式，确认问题后可通过调高选择器优先级解决，不建议直接修改Angular的视图封装规则。

问题2：单个组件单独引入Bootstrap解决方案 #

• 方案1：局部引入Bootstrap样式，在需要使用Bootstrap的组件的CSS文件顶部添加引入代码即可：

  /* Angular13以下版本用这个路径 */
  @import "~bootstrap/dist/css/bootstrap.min.css";
  /* Angular13及以上版本可以省略~前缀 */
  @import "bootstrap/dist/css/bootstrap.min.css";
  

  Angular默认的视图封装规则会给组件内样式添加独有的属性选择器做隔离，该引入只会作用于当前组件内部元素，不会污染其他页面组件。
• 方案2：如果仅需要用到Bootstrap的部分样式，可以把对应需要的样式代码单独提取出来，复制到当前组件的CSS文件中，完全不会产生样式污染。
• 注意：如果你手动把当前组件的视图封装改为了ViewEncapsulation.None，不要使用方案1，会导致Bootstrap样式全局生效，改回默认的ViewEncapsulation.Emulated即可。

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