4

これを内部に含む Home コンポーネントがあります。

<alert type="info">Hello from ng2-bootstrap</alert>

私のhome.style.scssの中には、これがあります：

:host .alert {
  background-color: green;
}

背景色を緑に変更する必要がありますが、そうではありません。

上記の CSS コードは、次のスタイルを生成します。

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3] {
  background-color: green;
}

最終的な HTML は次のようになります。

<home _nghost-wjn-3="">
  <div _ngcontent-wjn-3="" class="card-container">
    <alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
      <div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
        Hello from ng2-bootstrap  Sat Sep 17 2016
      </div>
    </alert>
  </div>
</home>

ここで何が問題なのかわかりませんが、セレクターが間違っていると思います。最終的なセレクターを次のようにしたいと思います。

[_nghost-wjn-3]   .alert

それ以外の：

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3]

言い換えれば、なぜ _ngcontent-wjn-3 属性がないの<div class="alert">...</div>ですか?

多分私はすべてのことを間違っています。私が達成しようとしているのは、個々のブートストラップ コンポーネント (<alert>上記のコード内)のCSSをカスタマイズすることです。カスタム コンポーネント (<home>上記のコード内)。

ホーム コンポーネントでデフォルトのビュー カプセル化 (エミュレート) を使用しています。

どうすればそれができますか？

4

2 に答える 2

0

必要なもの:

[_nghost-wjn-3] alert[_ngcontent-wjn-3]

それ以外の：

[_nghost-wjn-3] .alert[_ngcontent-wjn-3]

構造を確認すると、アラートタグにはngcontent...属性があり、アラートクラスの div 子ではありません。

于 2016-09-17T14:13:45.007 に答える