在ng内容中应用CSS样式

Question

在Angular应用程序中，我有一个带有<ng-content></ng-content>的组件。我为将被放入ng内容中的内容添加了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

试试这个

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

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

encapsulation: ViewEncapsulation.Native

Answer 2

尝试添加封装：ViewEncapsulation.本机于您的嵌入式组件，如

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 3

用干净的方法无法实现这一点。

一个变通方法是创建全局css：

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

但它将被弃用。请参阅本期

：ng-deep将保留长期不推荐使用的API的web记录。

Answer 4

您应该能够在将内容投影到ng内容标记的父组件中应用样式。角度样式隔离似乎将内容视为声明HTML的组件的一部分。

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