Angular 9 系列（七）css样式作用域

小渣渣

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 系列（六）调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

回顾，我们以前想修改引入的第三方组件的样式，怎么都修改不成功。

angular 设置组件 css 样式不生效解决方案
https://www.itsvse.com/thread-9184-1-1.html

:host 表示选择器，选择当前的组件。
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
不过官方文档上说，ng-deep 在未来的版本中将被放弃，不知道未来会变成什么样的语法。

在组件上面的特性可以设置 styleUrls 来设置当前组件的 css 样式表。

引入的该样式表表，只会影响到当前的标签元素，并不会影响到其他的组件，这是angular框架一个重要的特点。


css代码：

登录可见。

我们通过浏览器查看最终生成的css样式，如下图：

.itsvse1[_ngcontent-serverApp-c228] {
    background-color:azure;
}

[_nghost-serverApp-c228]     .itsvse2 {
    background-color: green;
}

[_nghost-serverApp-c228]     .itsvse3 {
    background-color: red;
}

  .itsvse4 {
    background-color: aqua;
}

.itsvse1 只会设置当前组件的样式，.itsvse2 和 .itsvse3 可以影响到引入的子组件的样式，.itsvse3 则可以影响到全局的样式。

itsvse1 css 只能影响到当前组件，是因为当前所有的节点元素都会添加“_ngcontent-serverapp-c228”属性，如下图：



（完）

小渣渣

angular encapsulation 的三种使用方式
https://www.itsvse.com/thread-9200-1-1.html

登录可见。