ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

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

著者：Eve Cole 更新時間：2022-06-02 14:07:02

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

1 :host

:host は、現在のコンポーネントを選択することを意味します。 【おすすめ関連チュートリアル：「angularチュートリアル」】

1.1 ホスト要素の選択

:host疑似クラス セレクターを使用して、コンポーネント宿主元素内の要素を選択します (コンポーネント テンプレート内の要素を基準にして)。これは、宿主元素全体を選択することと同じです。

以下のようなhtmlがあったとします。

 <アプリの詳細></アプリの詳細>

コンポーネントapp-detailのスタイル ( app-detail全体のスタイル) は次のとおりです。

 ：ホスト {
表示: インラインブロック;
背景: 赤;
}

ブラウザーのElements app-detail要素を選択し、スタイルは次のとおりです。

 [_nghost-wtd-c445] {
表示: インラインブロック;
背景色: 赤;
}

:host宿主元素本身に直接作用することがわかります。

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

:host後にセレクターを追加して、子元素を選択できます。例: :host h1 、コンポーネント ビュー内でh1タグを見つけます。

 :ホストh1 {
	色: 赤;
}

1.3 ホスト要素の条件付き選択

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

 :host(.active){
	境界線の幅: 3px;
}

このような：

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

2. ::ng-deep

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

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

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

:ホスト ::ng-deep h3 {
フォント スタイル: イタリック体。
}

2.2 特定のタイプの下で特定のタイプを検索する

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
高さ: 120ピクセル;
マージントップ: -16px;
}

3. :host-context

スタイルを適用する前に特定の条件を満たす必要がある場合。現在のコンポーネントの宿主元素の祖先ノードからドキュメントのルート ノードまでの CSS クラスを検索します。見つかった如果、次のスタイルが本组件内部要素に適用されます。

3.1 コンポーネントのホスト要素内の要素を選択する

:ホストコンテキスト {
	色: 赤;
}

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

次の例では、祖先元素(ホスト要素も使用可能) に CSS クラスtheme-lightがある場合にのみ、 background-colorスタイルが本组件内部すべての<h2>要素に適用されます。

 :host-context(.theme-light) h2 {
背景色: #eef;
}

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

例: :host-context h1コンポーネント ビュー内のh1タグを見つけます。

 :ホストコンテキスト h1{
色: ホットピンク;
}

3.4 特定のスタイルの内部状態を判断するために使用できる

h1{
色: ホットピンク;

:host-context(.active) &{
色: 黄色;
}
}

関連記事