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将保留长期不推荐使用的API的网络记录。

Answer 2

尝试

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

并删除封装语句并尝试ti build

encapsulation: ViewEncapsulation.Native

Answer 3

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

                    var gsearch = headline;


                    fetch('https://gnews.io/api/v3/search?q='+gsearch+'&token=API-Token')
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (data) {
                        console.log(data);
                    });

Answer 4

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

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

在ng-content内套用CSS样式

4 个答案: