代码之家 › 专栏 › 技术社区 › Vikas Jadhav

什么时候以及为什么我们应该使用角度视图封装

angular css

4

Vikas Jadhav · 技术社区 · 7 年前

在角度工作时,在决定何时使用和为什么使用时,是否应使用特定的规则或准则? View Encapsulation ?

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None  /*What is the use of this line*/
})

有人能简单地解释一下吗?

2 回复 | 直到 7 年前

1

7

SiddAjmera 7 年前

Codecraft.TV 有一篇关于 ViewEncapsulation 以便更好地理解。

总结一下:

ViewEncapsulation.Emulated :angular使用自动生成的属性将我们的通用CSS类选择器更改为仅针对单个组件类型的选择器。

我们在组件上定义的任何样式都不会泄漏到应用程序的其余部分,而是 视图封装。模拟 我们的组件仍然继承全局样式。

ViewEncapsulation.Native :如果我们希望angular使用shadom,我们可以将封装参数设置为使用 视图封装.native

用 视图封装.native 我们在组件上设置的样式不会泄漏到组件范围之外。

如果我们要定义一个第三方组件,我们希望人们单独使用,那么这就太好了。我们可以使用CSS样式描述组件的外观,而不必担心样式会泄露并影响应用程序的其余部分。

然而与 视图封装.native 我们的组件也与我们为应用程序定义的全局样式相隔离。因此,我们不继承全局样式,必须在组件装饰器上定义所有必需的样式。

终于 视图封装.native 需要一个称为shadow dom的功能,但并非所有浏览器都支持该功能。

ViewEncapsulation.None :如果我们根本不想有任何封装,我们可以使用 视图封装。无 .

如果我们不封装任何东西,那么我们在组件中定义的样式将泄漏并开始影响其他组件。

您可能希望查看的其他一些资源:

2

0

Durgesh 7 年前

让我们举一个例子,我们有一个父组件和一个子组件,它们有自己的HTML、TS、CSS文件。

假设在父组件的HTML中,您引用了下面这样的子组件-

parent.component.html -> <app-child> </app-child>

现在,如果您在child.component.css中创建和添加类似的样式,比如parent.component.css文件(让我们来 <p> 标记为一个例子),然后这些将分别添加到每个组件中,即使所有角度组件的HTML都呈现在一个页面上。所以现在你将有不同的风格 <P & GT; 在子组件中。(在场景的后面,角向每个组件添加一个随机属性,然后添加到该组件内的所有元素)

这种角度的行为,体现在视图封装中。由角型阴影dom技术使用,这不是所有browers都支持的,但角型是这样的。视图封装有3个选项-

encapsulation: ViewEncapsulation.None, 
           ViewEncapsulation.Emulated, (-- this is default)
           ViewEncapsulation.Native (-- only applies to browsers with shadow DOM technology)<br>