Angular 6中使用ng-content时样式不生效，如何解决？

嘿，这个坑我之前踩过！你遇到的问题核心是Angular的样式隔离机制在起作用——默认情况下Angular会通过ViewEncapsulation.Emulated模式给组件内的样式添加专属属性选择器，而<ng-content>投影进来的内容属于父组件的DOM节点，不会带上这个专属属性，所以你写的app-embed iframe选择器根本匹配不到目标元素。

下面给你几个可行的修复方案，按需选择：

方案1：使用:host ::ng-deep穿透样式（最常用） #

:host代表当前组件的宿主元素，::ng-deep会让样式穿透到投影内容里，这样你的样式就能作用到通过<ng-content>进来的iframe了。修改后的代码如下：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-embed',
  template: `<ng-content></ng-content>`,
  styles: [`
    app-embed {
      position:relative;
      width:100%;
      height:0;
      padding-bottom:33%;
    }
    :host ::ng-deep iframe {
      width: 100vw;
      height: 56.25vw;
    }`]
})
export class AppEmbedComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

小贴士：虽然::ng-deep目前还能正常使用，但Angular官方不推荐长期依赖它，不过在投影内容样式这个场景下，它依然是最便捷的解决方案。

方案2：将样式移到全局样式文件 #

把app-embed iframe的样式放到项目的全局样式文件（比如styles.scss/styles.css）里，全局样式不受组件隔离限制，自然能作用到投影的iframe。

优点是不需要用::ng-deep，缺点是要注意样式的作用范围，避免不小心影响到其他组件里的iframe。

方案3：关闭组件的样式隔离 #

在组件的元数据里设置encapsulation: ViewEncapsulation.None，这样组件的样式会变成全局样式，同样能作用到投影内容：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-embed',
  template: `<ng-content></ng-content>`,
  styles: [`
    app-embed {
      position:relative;
      width:100%;
      height:0;
      padding-bottom:33%;
    }
    app-embed iframe {
      width: 100vw;
      height: 56.25vw;
    }`],
  encapsulation: ViewEncapsulation.None
})
export class AppEmbedComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

注意：关闭样式隔离后，组件内的所有样式都会变成全局的，容易和其他组件样式冲突，只适合这个组件样式非常独立的情况。

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