首先，要了解DOM树结构，这部分属于JavaScript的知识。
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。
DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。DOM树是一通过节点层级划分，任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。这里不多赘述，只举一个简单的例子。
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>以下为代码对应的DOM树结构
(这里的Angular并没有指定特定的版本，因为没有做相关的技术调查，证明是哪个版本的特性)
Angular在进行页面加载的时候，只对页面组件的标签进行了标记(暂且叫为标记)
以此来区分angular之间的组件
标记过程如下图
<app-root></app-root>的标签的标记就是_nghost-rgj-c669
<header></header>的标签的标记是_ngcontent-rgj-c669
<nav></nav>的标签的标记是_ngcontent-rgj-c669
以二叉树结构类比
<app-root>为angular组件
nghost-rgj-c669是根节点
ngcontent-rgj-c669是子节点
推测angular视图封装的意义
在对div进行css样式修改的时候
我们要区别绿色div和红色紫色的div
此时就可以使用Angular视图封装的标记属性
通过
<div ng-host-c816>
<div ng -host-c822>
来区分组件的div和普通的div
同时，同一个组件的所有标记属性都是一样的，以此来保证同一组件的css样式一样
如何使同一组件，在程序中不同位置的css样式不同?
例:找到紫色框下的div
在angular的文件结构下
一个组件有三个文件html，ts，scss
程序页面每次使用当前组件的时候，直接标签引用即可
所以，同一个程序不同位置使用的组件，在用同一个组件结构文件中设置
在schedule-center.scss下
使用:host {} 或者 :host-context(){}选择组件标签为当前对象
两个位置的标签都会被选择
然后，选择<schedule-center></schedule-center>下的div
使用:host.divClassName {} :host>divClassName {} :host divClassName {}
或者 :host-context().divClassName{} :host-context()>divClassName{} :host-context() divClassName{}
详情参考css空格 点 >的区别
这样就选中了所有<schedule-center></schedule-center>下的div
使用 :host-context(){}选择组件标签为当前对象可以区分两个<schedule-center></schedule-center>标签
:host-context(){}的实际使用方法是:host-context(selector){}，在context方法中填入选择器
选择器是css选择器，以类选择器举例
:host-context(scheduleClassName){}
:host-context(黄色schedule的ClassName){}
:host-context(蓝色schedule的ClassName){}
最后，
:host-context(黄色schedule的ClassName).div的classname{}
选中紫色框的div
For KendoUI
kendoUI组件引入，在angular框架下
推测有一套专属于kendoUI的标记
在标签的class中进行标记，以k开头 例:class='k-button'
并没有在标签中添加像angular视图封装一样的属性标记
所以，在进行样式修改的时候，和普通样式修改一样
:host ::ng-deep .className{}
common.scss(普通样式或者项目样式的共同文件)
这两种修改样式是等效的
在使用一些第三方的组件的时候，要修改组件的样式。
这种情况下使用:
:host ::ng-deep .className{
新的样式......
}这样的方式就可以方便的修改样式了。
例：
在schedule-center.scss下
:host ::ng-deep spanClassName{
新的样式......
}这样就可以修改kendo-gantt下的span标签的样式
感谢观看，到这里就告一段落了。
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
