何时以及为什么我们应该在角度视图中使用View Encapsulation [英] When and why should we use View Encapsulation in angular

问题描述

在使用angular时，应使用特定规则或准则来决定何时使用以及为什么使用

有人可以用简单的方式解释吗?

解决方案

Codecraft.TV 在 ViewEncapsulation

.

总结一下:

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

我们在组件上定义的任何样式都不会泄漏到应用程序的其余部分，但是通过 ViewEncapsulation.Emulated ，我们的组件仍然继承全局样式.

---

ViewEncapsulation.Native :如果我们希望Angular使用影子DOM，则可以将封装参数设置为使用 ViewEncapsulation.Native

我们在组件上设置的 ViewEncapsulation.Native 样式不会泄漏到组件范围之外.

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

不过，对于 ViewEncapsulation.Native ，我们的组件也与我们为应用程序定义的全局样式无关.因此，我们不必继承全局样式，而必须在组件装饰器上定义所有必需的样式.

最后， ViewEncapsulation.Native 需要一个称为影子DOM的功能，并非所有浏览器都支持该功能.

---

ViewEncapsulation.None :如果我们根本不想封装，可以使用 ViewEncapsulation.None .

如果我们不封装任何内容，则我们在组件中定义的样式将泄漏并开始影响其他组件.

您可能需要查看的其他一些资源:

1. 查看英语的封装-作者Thoughtram
2. 通过Rangle.IO查看封装
3. 使用ViewEncapsulationView在Angular中设置样式
4. ViewEncapsulation.Native，ViewEncapsulation.None和ViewEncapsulation.Emulated之间的差异

When working in angular is there a particular rule or guideline that should be used in deciding when to use and why to use View Encapsulation?

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

Can someone please explain in simple ways?

解决方案

Codecraft.TV has an amazing article on ViewEncapsulation that you can refer to get a better understanding.

To just summarize it:

ViewEncapsulation.Emulated: Angular changes our generic css class selector to one that target just a single component type by using automatically generated attributes.

Any styles we define on a component don’t leak out to the rest of the application but with ViewEncapsulation.Emulated our component still inherits global styles.

---

ViewEncapsulation.Native: If we want Angular to use the shadow DOM we can set the encapsulation parameter to use ViewEncapsulation.Native

With ViewEncapsulation.Native styles we set on a component do not leak outside of the components scope.

This is great if we are defining a 3rd party component which we want people to use in isolation. We can describe the look for our component using css styles without any fear that our styles are going to leak out and affect the rest of the application.

However with ViewEncapsulation.Native our component is also isolated from the global styles we’ve defined for our application. So we don’t inherit the global styles and have to define all the required styles on our component decorator.

Finally ViewEncapsulation.Native requires a feature called the shadow DOM which is not supported by all browsers.

---

ViewEncapsulation.None: If we don’t want to have any encapsulation at all, we can use ViewEncapsulation.None.

If we don't encapsulate anything, the style we defined in the component will leak out and started affecting the other components.

Some other resources that you might want to have a look into:

1. VIEW ENCAPSULATION IN ANGULAR - By Thoughtram
2. View Encapsulation by Rangle.IO
3. Scoping Your Styles in Angular With ViewEncapsulationView
4. Diff between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated

这篇关于何时以及为什么我们应该在角度视图中使用View Encapsulation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！