Angular：document.execCommand添加的&ltol&gt只识别样式.css中的CSS规则而不识别组件的CSS规则。 _编程开发

Angular：document.execCommand添加的<ol>只识别样式.css中的CSS规则而不识别组件的CSS规则。

创始人

2024-11-01 20:31:15

0次

我们可以使用Angular的ViewEncapsulation特性来避免这个问题。ViewEncapsulation有三种模式：Emulated、Native和None，默认情况下是Emulated。Emulated模式将组件的样式封装在Shadow DOM中，而不会影响全局样式。

将组件的ViewEncapsulation模式设置为None即可解决该问题。示例代码如下：

@Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'], encapsulation: ViewEncapsulation.None // 设置为None }) export class ExampleComponent { // 组件代码 }

然后在example.component.css中添加样式规则，它会应用于添加的ol元素。

例如，如果你有以下CSS规则：

ol { color: red; }

然后在component的CSS中添加以下规则：

.example ol { font-size: 20px; }

此时添加的

上一篇：Angular：登录页面无法使用，用户名和密码正确，但仍提示信息不正确？

下一篇：Angular：动态表单问题

Angular：document.execCommand添加的<ol>只识别样式.css中的CSS规则而不识别组件的CSS规则。

相关内容

热门资讯

Angular：document.execCommand添加的&lt;ol&gt;只识别样式.css中的CSS规则而不识别组件的CSS规则。

相关内容

热门资讯

Angular：document.execCommand添加的<ol>只识别样式.css中的CSS规则而不识别组件的CSS规则。