アングル2のコンポーネントに適用されるホストスタイル

Question

現在、アングルコンポーネントのカスタムフォームコンポーネントを作成中で、いくつかのスタイリングの問題が発生しています。

私は自分の入力が可変幅をとり、それらがホストコンポーネントによって制御されるようにしたいと思います。

例えば

：私はこれを行う場合、ルールは単に無視され、私のコンポーネントに適用されていない、いくつかの理由について

.input { 
    width: 250px; 
} 

：<my-input class="input">は、以下のような対応するクラスを持っているでしょう。

私は不要なdivのように見えるものにコンポーネントをラップしてから、それらの親divをスタイリングしてコンテンツが収まるようにしています。私は、CSSルールで十分であればスタイリングのためだけにラッパーを作成したくありません。

これには:hostを使用しますか？ また、host-context(.input)については、その後、コンシューマ内のクラスを適用するCSS？

Answer 1

私は::ng-deep sinceを使用することに対して助言します。角度チームはplanning on deprecating itです。

あなたのコンポーネントをホストしているコンポーネントから何かをスタイル化したい場合は、ホストバインディング/入力を作成し、その値を使用してスタイルディレクティブを使用してコンポーネントにバインドすることをお勧めします。