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

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

#1. :host

##:host は、現在のコンポーネントを選択することを意味します。 [関連チュートリアルの推奨事項: "

angular チュートリアル

"]

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

:host

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

<app-detail></app-detail>

コンポーネント

app-detail

のスタイル (

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

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

BrowserElements

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

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

ご覧のとおり、:host

は

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

1.2 ホスト要素の子要素を選択します

:host

にあります。後でセレクターを追加して、

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

:host h1 {
	color:red;
}

1.3 条件付きでホスト要素を選択します

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

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

次のようになります:

<app-detail class="active"></app-detail>

2.

:: ng-deep

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

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

2.1 ホスト要素から現在の要素に移動します。 次に、現在のコンポーネントでサードパーティ コンポーネントを使用している h3 要素を含む、DOM 内のすべての子 h3 要素に移動します。

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

2.2特定のタイプの特定のタイプ

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

3.

:host-context

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

host 要素

の

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

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

:host-context {
	color:red;
}

3.2 ホストをターゲットにします。アクティブなクラスがある場合にのみ有効です

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

theme-light

、background-color スタイルは、 このコンポーネント内の すべての c1a436a314ed609750bd7c7d319db4da 要素に適用されます。 <pre class="brush:css;toolbar:false;">:host-context(.theme-light) h2 { background-color: #eef; }</pre>3.3 :host-context の後にセレクターを追加して、サブ要素を選択できます。

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

h1

タグの配置 <pre class="brush:css;toolbar:false;">:host-context h1{ color: hotpink; }</pre>3.4 は、特定のスタイルの内部条件を決定するために使用できます

h1{
    color: hotpink;

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

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

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