web-dev-qa-db-ja.com

Angular 2スタイリングが子コンポーネントに適用されない

子コンポーネントタグにスタイルを適用しようとしていますが、できません。

アンカータグを持つ子コンポーネントがあります。

親コンポーネントにアンカータグのスタイリングがありますが、適用されません。それに対する解決策は何ですか？

作業コード： http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

 <a href="https://www.google.com">Google</a>

親コンポーネントでは、子コンポーネントを使用し、この子コンポーネントにスタイルを適用しています。

HTMLコード：

<div class="container">
  <div class="test">
    <testapp></testapp>
  </div>
</div>

Cssコード：

.container{
  font-family:sans-serif;
  font-size:18px;
  border: 1px solid black;
}
.test{
  width:50%;
  background-color:#f0f5f5;
}

.container:hover .test{
  background-color:#e6ffe6;
}
.container:hover .test:hover{
  background-color:#ffffe6;
}
.container .test a {
    color:   red ;
}
.container .test a:hover {
    color:green;
}
htmlcsscss3angularangular2-template
34
Varun

デフォルトのコンポーネントにはビューのカプセル化（シャドウdom）があるためです。この動作を無効にするには、以下で説明するように、encapsulation属性を活用できます。

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

このplunkrを参照してください： http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview 。

68
Thierry Templier

StyleUrlsプロパティを使用する場合、スタイルは、子ではなく1つのコンポーネントに対してlocalです。そこで、2つの変更を行いました。1）styleUrlsをtestappコンポーネントに移動しました。 2）divをtestappコンポーネントに移動しました。

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}
2
DeborahK

編集：これは解決する必要があります：

子クラスのCSSで以下のコードを書きます

:Host.parentclass childclass{

}

Parentclassは、childの直接の親です。 childclassは、子コンポーネントに適用されるクラスです。

0
RPD