gpt4 book ai didi

css - Angular2 - 将 [_ngcontent-mav-x] 添加到样式

转载 作者:技术小花猫 更新时间:2023-10-29 10:06:46 26 4
gpt4 key购买 nike

我正在设置一个基本的 Angular 应用程序,我正在尝试向我的 View 中注入(inject)一些 CSS。这是我的组件之一的示例:

import { Component } from 'angular2/core';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';

import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';

@Component({
selector: 'portfolio-app',
templateUrl: '/app/views/template.html',
styleUrls: ['../app/styles/template.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
{ path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true },
{ path: '/portfolio', name: 'Portfolio', component: PortfolioComponent }
])

export class AppComponent { }

现在从我的服务器请求 .css 文件,当我检查页面源代码时,我可以看到它已添加到头部。但是奇怪的事情发生了:

<style>@media (min-width: 768px) {


.outer[_ngcontent-mav-3] {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.mainContainer[_ngcontent-mav-3] {
display: table-cell;
vertical-align: middle;
}
.appContainer[_ngcontent-mav-3] {
width: 95%;
border-radius: 50%;
}
.heightElement[_ngcontent-mav-3] {
height: 0;
padding-bottom: 100%;
}
}</style>

从此文件生成:

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
/* center the mainContainer */

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.mainContainer {
display: table-cell;
vertical-align: middle;
}
.appContainer {
width: 95%;
border-radius: 50%;
}
.heightElement {
height: 0;
padding-bottom: 100%;
}
}

有人可以解释一下 _ngcontent-mav 标签的来源、它代表什么以及如何去掉它吗?

我认为这就是我的样式没有应用到我的模板的原因。

如果您需要有关应用程序结构的更多信息,请查看我的 gitRepo ,或者提问,我会将代码添加到问题中。

感谢您的帮助。

最佳答案

更新2

::slotted 现在被所有新浏览器支持并且可以与 `ViewEncapsulation.ShadowDom 一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

更新

/deep/>>> 已弃用。::ng-deep 替换了它们。 ::-deep 在源代码和文档中也被标记为弃用,但这意味着它最终也会被删除。

我认为这取决于 W3C 为影子 DOM 提出的主题(例如 https://tabatkins.github.io/specs/css-shadow-parts/)

这基本上是一种解决方法,直到所有浏览器都原生支持它并且 ViewEncapsulation.Emulated 可以完全删除。

::ng-deep 也受 SASS 支持(或将受支持,具体取决于 SASS 实现)

原创

View 封装有助于防止样式渗入或渗出组件。默认封装是 ViewEncapsulation.Emulated,其中像 _ngcontent-mav-x 这样的类被添加到组件标签,样式也被重写为仅适用于匹配的类。

这在某种程度上模拟了影子 DOM 的默认行为。

您可以通过将 encapsulation: ViewEncapsulation.None 添加到 @Component() 装饰器来禁用此封装。

另一种方法是最近(重新)引入的阴影穿刺 CSS 组合器 >>>/deep/::shadow .这些组合器是为 shadow DOM 样式引入的,但已被弃用。 Angular 最近引入了它们,直到实现了其他机制,如 CSS 变量。另见 https://github.com/angular/angular/pull/7563 ( https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17 )

>>>/deep/ 是等效的,使用此组合器会使样式忽略添加的辅助类 (_ngcontent-mav-x)

* >>> my-component, /* same as */
* /deep/ my-component {
background-color: blue;
}

适用于所有 my-component 标签,无论它们嵌套在其他组件中有多深。

some-component::shadow * {
background-color: green;
}

适用于 some-component 模板中的所有元素,但不适用于进一步的后代。

它们也可以组合

* /deep/ my-component::shadow div {
background-color: blue;
}

这适用于所有 my-component 模板中的所有 div 元素,无论 my-component 嵌套在其他组件中有多深。

/deep/>>>::shadow 只能与

一起使用
  • 封装:ViewEncapsulation.None
  • 封装:ViewEncapsulation.Emulated
  • encapsulation: ViewEncapsulation.Native 当浏览器原生支持它们时(Chrome 支持但会在控制台中打印警告它们已被弃用)或
    当浏览器不原生支持 shadow DOM 和web_components polyfill 已加载。

有关简单示例,另请参阅 Plunker来自这个问题 https://stackoverflow.com/a/36226061/217408

另请参阅 ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0 中的演示文稿

关于css - Angular2 - 将 [_ngcontent-mav-x] 添加到样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36224276/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com