Angular の :host、:host-context、::ng-deep セレクター

この記事では、angular のいくつかの特別なセレクター: host、:host-context、::ng-deep について詳しく説明します。皆さんのお役に立てれば幸いです。

#1. :host

angular チュートリアル

"]

1.1 ホスト要素を選択します使用

コンポーネント host 要素 (コンポーネント テンプレート内の要素に関連) 内の要素を選択するために使用される疑似クラス セレクター。子要素がない場合、 # 全体を選択するのと同等です。 ##ホスト要素。 次の html がある場合:

app-detail

app-detail 全体のスタイル)次のように:

:host {
    display: inline-block;
    background: red;
}

app-detail 要素を選択します。スタイルは次のとおりです:

[_nghost-wtd-c445] {
    display: inline-block;
    background-color: red;
}

ホスト要素自体に直接作用します

:host

子要素 を選択します。例: :host h1 コンポーネント ビュー内に h1 タグを配置します。

:host h1 {
	color:red;
}

これは、ホストがターゲットとして使用され、アクティブなクラスがある場合にのみ有効になります。

:host(.active){
	border-width: 3px;
}

2.

::ng-deep は、中間 className のネストされた階層関係を無視できます。変更したい className を直接見つけます。

一部のサードパーティ コンポーネントを使用する場合、コンポーネントのスタイルを変更する必要があります。この場合は、

:host ::ng-deep h3 {
  font-style: italic;
}

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

特定の条件の場合スタイルを適用する前に満たす必要があります。現在のコンポーネントの

の

ancestor ノードからドキュメントのルート ノードまでの CSS クラスを検索します。 が見つかった場合、次のスタイルがこのコンポーネントの 内部要素に適用されます。

3.1 コンポーネントのホスト要素の要素を選択します。

:host-context {
	color:red;
}

次の例では、先祖要素(ホスト要素も使用可能)にCSSクラスがある場合にのみ有効です

、background-color スタイルは、 このコンポーネント内の すべての

要素に適用されます。

:host-context(.theme-light) h2 {
  background-color: #eef;
}

ログイン後にコピー

3.3 :host-context の後にセレクターを追加して、サブ要素を選択できます。

例: :host- context h1 コンポーネント ビューでの

h1

タグの配置

:host-context h1{
    color: hotpink;
}

ログイン後にコピー

3.4 は、特定のスタイルの内部条件を決定するために使用できます

h1{
    color: hotpink;

    :host-context(.active) &{
        color: yellow;
    }
}

ログイン後にコピー

プログラミング関連の知識については、プログラミング教育をご覧ください。 ！

以上がAngular の :host、:host-context、::ng-deep セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。