Angular2 - 스타일에 [_ngcontent-mav-x] 추가

Angular2 - 스타일에 [_ngcontent-mav-x] 추가

저는 기본 각도 앱을 설정하고 있고, 제 견해에 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%;
    }
}

누가 _ng content-mav 태그가 어디서 왔는지, 무엇을 의미하는지, 어떻게 제거하는지 설명해 주시겠습니까?

이것이 제 스타일이 제 템플릿에 적용되지 않는 이유라고 생각합니다.

앱 구조에 대한 더 많은 정보가 필요하면, 제 gitRepo를 확인하거나 질문하면 제가 질문에 코드를 추가하겠습니다.

도와 주셔서 감사해요.

업데이트 2

::slotted이제 모든 새 브라우저에서 지원되며 'ViewEncapsulation'과 함께 사용할 수 있습니다.섀도 돔

https://developer.mozilla.org/en-US/docs/Web/CSS/ :: 업데이트됨

갱신하다

/deep/그리고.>>>사용되지 않습니다.::ng-deep 그들을 대신합니다. ::-deep또한 소스 및 문서에서 더 이상 사용되지 않는 것으로 표시되지만, 이는 또한 결국 제거된다는 것을 의미합니다.

W3C가 섀도 DOM을 어떻게 만드느냐에 따라 다르다고 생각합니다(예: https://tabatkins.github.io/specs/css-shadow-parts/) ).

기본적으로 모든 브라우저가 기본적으로 이 기능을 지원할 때까지 해결해야 합니다.ViewEncapsulation.Emulated완전히 제거할 수 있습니다.

::ng-deepSAS에서도 지원됨(SAS 구현에 따라 지원됨)

원래의

뷰 캡슐화는 스타일이 구성요소 내부 또는 외부로 블리딩되는 것을 방지하는 데 도움이 됩니다.기본 캡슐화는 다음과 같습니다.ViewEncapsulation.Emulated같은 수업이 있는 곳에서_ngcontent-mav-x구성 요소 태그에 추가되고 스타일이 일치하는 클래스에만 적용되도록 다시 작성됩니다.

이것은 섀도 DOM의 기본 동작을 어느 정도 에뮬레이트합니다.

이 캡슐화 추가를 사용하지 않도록 설정할 수 있습니다.encapsulation: ViewEncapsulation.None에게@Component()장식가

또 다른 방법은 최근에 도입된 그림자 피어싱 CSS 콤비네이터입니다.>>>,/deep/,그리고.::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/하며 이 클래스를 . (동일이결합도사를용기스면추하타됩클이무다우래니시를게스하미가된일하며▁(동▁classes▁ignore됩▁are)._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;
}

것은모템두있플에모는든다적니용소됩요에릿이의▁of▁의 템플릿에 됩니다.my-component 깊이가 깊어도 .my-component다른 구성 요소에 중첩되어 있습니다.

/deep/,>>>,그리고.::shadow만 사할수있다니습용▁be와만 할 수 .

• encapsulation: ViewEncapsulation.None
• encapsulation: ViewEncapsulation.Emulated
• encapsulation: ViewEncapsulation.Native함) 또는 "Chrome"라는 메시지를 표시합니다.
  브라우저가 섀도 DOM을 네이티브로 지원하지 않고 web_components 폴리필이 로드된 경우.

간단한 예는 이 질문의 플런커를 참조하십시오. https://stackoverflow.com/a/36226061/217408

ng-conf 2016의 이 프레젠테이션도 참조하십시오. https://www.youtube.com/watch?v=J5Bvy4KhIs0

당신은 이것을 시도해보세요.

import {ViewEncapsulation} from 'angular2/core';

@Component({
   ...
   encapsulation: ViewEncapsulation.None,
   ...
})

언급URL : https://stackoverflow.com/questions/36224276/angular2-adding-ngcontent-mav-x-to-styles