web-dev-qa-db-ja.com

Angular2-[_ngcontent-mav-x]をスタイルに追加

基本的なangular=アプリを設定しています。ビューにcssを挿入しようとしています。これはコンポーネントの1つの例です。

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 を確認するか、質問してコードを質問に追加してください。

助けてくれてありがとう。

csstypescriptangular
27
Miha Šušteršič

update2

_::slotted_はすべての新しいブラウザでサポートされるようになり、 `ViewEncapsulation.ShadowDomで使用できます

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

update

_/deep/_および_>>>_は非推奨です。 _::ng-deep_はそれらを置き換えます。 _::-deep_もソースおよびドキュメントで非推奨とマークされていますが、これは最終的に削除されることも意味します。

シャドウDOMのテーマをW3Cがどのように設定するかによります（ https://tabatkins.github.io/specs/css-shadow-parts/ など）

基本的には、すべてのブラウザーがネイティブにサポートし、_ViewEncapsulation.Emulated_を完全に削除できるようになるまでの回避策です。

_::ng-deep_はSASSでもサポートされます（またはSASS実装に応じてサポートされます）

オリジナル

ビューのカプセル化は、スタイルがコンポーネントに出入りするのを防ぐのに役立ちます。デフォルトのカプセル化は_ViewEncapsulation.Emulated_で、ここで__ngcontent-mav-x_などのクラスがコンポーネントタグに追加され、スタイルも一致するクラスにのみ適用されるように書き直されます。

これは、シャドウDOMのデフォルトの動作をある程度エミュレートします。

このカプセル化を無効にすると、@Component()デコレータに_encapsulation: ViewEncapsulation.None_を追加できます。

もう1つの方法は、最近（再）導入されたシャドウピアスCSSコンビネーター_>>>_、_/deep/_、および_::shadow_です。これらのコンビネータは、シャドウDOMのスタイリングのために導入されましたが、非推奨です。 Angular CSS変数のような他のメカニズムが実装されるまで、最近紹介します。 https://github.com/angular/angular/pull/756 （ 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_が他のコンポーネントにネストされている深さに関係なく、すべての_my-component_テンプレートのテンプレート内のすべてのdiv要素に適用されます。

_/deep/_、_>>>_、および_::shadow_は、

  • _encapsulation: ViewEncapsulation.None_
  • _encapsulation: ViewEncapsulation.Emulated_
  • _encapsulation: ViewEncapsulation.Native_ブラウザがネイティブにサポートしている場合（Chromeはサポートしていますが、コンソールに非推奨であるという警告を表示します）または
    ブラウザがシャドウDOMをネイティブでサポートしておらず、web_componentsポリフィルがロードされている場合。

簡単な例については、この質問の Plunker も参照してください https://stackoverflow.com/a/36226061/217408

Ng-conf 2016のこのプレゼンテーションもご覧ください https://www.youtube.com/watch?v=J5Bvy4KhIs

40
Günter Zöchbauer

これを試してみてください

import {ViewEncapsulation} from 'angular2/core';

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