在 ng-content 中应用 CSS 样式

Question

在 Angular 应用程序中，我有一个带有 <ng-content></ng-content> 的组件。我为将放在 ng-content 中的内容添加了 scss 规则，但它们被忽略了。我尝试使用 :host 来解决，但它不起作用。

https://stackblitz.com/edit/angular-ewqhzj

包装组件：

<app-embed>
   <p>Hello world!</p><h1 class="toBeColored">toBeColored</h1>
</app-embed>

嵌入组件中的样式：

:host {
  border: 5px solid red;
 padding: 15px;
 display: block;
 .toBeColored {
   color: pink;
 }
}

问题是'toBeColored'字符串的粉红色没有设置

Answer 1

你无法通过干净的方式实现它。

解决方法是创建全局 css :

:host {
 ...;
 ::ng-deep .toBeColored {
   color: pink;
 }
}

但它将被弃用。看到这个 issue

::ng-deep is going to hold the web record for long-lived deprecated API.

Answer 2

试试这个

:host ::ng-deep{
  border: 5px solid red;
  padding: 15px;
  display: block;
   .toBeColored {
    color: pink !important;
  }
}

并删除封装语句并尝试构建

encapsulation: ViewEncapsulation.Native

Answer 3

尝试添加封装：ViewEncapsulation.Native 到您的嵌入组件，如

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

@Component({
  selector: 'app-embed',
  templateUrl: './embed.component.html',
  styleUrls: ['./embed.component.scss'],
  encapsulation: ViewEncapsulation.Native
})
export class EmbedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 4

您应该能够在将内容投射到 ng-content 标签的父组件中应用样式。 angular 样式隔离似乎将内容视为声明 HTML 的组件的一部分。

https://stackblitz.com/edit/angular-ivy-q9dn68

在 ng-content 中应用 CSS 样式

Apply CSS Style inside ng-content

css

sass

angular2-ngcontent

angular