web-dev-qa-db-ja.com

Angular 2：コンポーネントのHost要素をスタイルするにはどうすればいいですか？

My [comp]というAngular 2のコンポーネントがあります。

<my-comp></my-comp>

Angular 2でこのコンポーネントのHost要素をどのようにスタイルしますか？

Polymerでは、 "：Host"セレクタを使うでしょう。私はAngular 2で試しましたが、うまくいきません。

:Host {
  display: block;
  width: 100%;
  height: 100%;
}

私はまた、セレクタとしてコンポーネントを使ってみました：

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

どちらの方法もうまくいかないようです。

ありがとう。

cssangularcss-selectorsangular-components
158
Ravi Teja Gudapati

バグがありましたが、当面の間は修正されました。 :Host { }は今正常に動作します。

また支えられる

  • Host要素の属性、クラスなどに一致するselectorに対する:Host(selector) { ... }

  • 親コンポーネントの要素、クラスなどに一致するselectorに対する:Host-context(selector) { ... }

  • selector /deep/ selector（エイリアスselector >>> selectorはSASSでは動作しません）スタイルが要素の境界を越えて一致するようにしました

    • UPDATE：SASSは/deep/を非推奨にしています。
      Angular（TS and Dart）は、SASSとも互換性がある代替として::ng-deepを追加しました。

    • UPDATE2：::slotted::slottedはすべての新しいブラウザでサポートされ、 `ViewEncapsulation.ShadowDomで使用できるようになりました
      https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Angular 2コンポーネントへの外部CSSスタイルのロード もご覧ください。

/deep/と>>>はの影響を受けませんChromeで使用されているのと同じセレクタコンビネータによって廃止予定です。
Angularはそれらをエミュレート（書き換え）するので、それらをサポートするブラウザには依存しません。

これは、/deep/と>>>がネイティブのシャドウDOMを有効にし、ブラウザサポートに依存するViewEncapsulation.Nativeと連携しない理由でもあります。

256
Günter Zöchbauer

コンポーネント要素だけをスタイルする方法を見つけました。それがどのように機能するかについての文書はありませんが、次のような 'Host'プロパティの下で、属性値をコンポーネントディレクティブに入れることができます。

@Component({
    ...
    styles: [`
      :Host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'Lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

更新：GünterZöchbauerが述べたように、バグがありました、そして今、あなたはこのようにcssファイルでさえHost要素をスタイルすることができます：

:Host{ ... }
31
prespic

この問題をチェック してください 。私は、 新しいテンプレートプリコンパイルロジック が実装されればバグは解決すると思います。今のところ、あなたができる最善のことはあなたのテンプレートを<div class="root">にラップしてこのdivをスタイルすることだと思います：

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

このプランカーを見てください

11
alexpods

適用したい一般的なスタイルがある場合は、Component要素でHost要素に.classを追加できます。

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';
9
Xquick

:Hostの子要素のスタイルを見たい人のために、ここに::ng-deepの使い方の例を示します

:Host::ng-deep <child element>

例：:Host::ng-deep span { color: red; }

他の人が言ったように/deep/は廃止予定です

4
Petros Kyriakou

試してみてください：Host>/deep /：

Parent.component.lessファイルに以下を追加します。

:Host {
    /deep/ app-child-component {
       //your child style
    }
}

あなたの子セレクタでapp-child-componentを置き換えます

3
abahet