Angulars :host-, :host-context- und ::ng-deep-Selektoren

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis mehrerer spezieller Selektoren in angular: host, :host-context, ::ng-deep. Ich hoffe, er wird für alle hilfreich sein!

1. :host:host

:host 表示选择当前的组件。【相关教程推荐：《angular教程》】

1.1 选择宿主元素

使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素），没有子元素就相当于选择整个宿主元素。

如有下面html:

<app-detail></app-detail>

组件 app-detail 的样式（整个app-detail 的样式）如下 ：

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

浏览器 Elements 选择 app-detail 元素， Style 如下：

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

可以看得出来，:host 直接作用于宿主元素本身

1.2 选择宿主元素的子元素

可以在 :host 后面添加选择器以选择子元素。例如：:host h1 定位组件视图内的 h1 标签

:host h1 {
	color:red;
}

1.3 有条件的选择宿主元素

把宿主作为目标，同时带有 active 的 class 类的时候才会生效

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

像这样：

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

二、 ::ng-deep

::ng-deep 可以忽略中间 className 的嵌套层级关系。直接找到你要修改的 className。

在使用一些第三方的组件的时候，要修改组件的样式,这种情况下使用.

2.1 从宿主元素到当前元素再到 DOM 中的所有子 h3 元素，包括当前组件中使用第三方组件的 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;
}

三、 :host-context

如果需要满足某条件才能应用样式。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。如果找到，才会应用后面的样式到本组件内部元素。

3.1 选择组件宿主元素中的元素

:host-context {
	color:red;
}

3.2 把宿主作为目标，同时带有active的class类的时候才会生效

在下面的例子中，只有当某个祖先元素(宿主元素也可以)有 CSS 类 theme-light 时，才会把 background-color 样式应用到本组件内部的所有 c1a436a314ed609750bd7c7d319db4da 元素中。

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

3.3 可以在:host-context后面添加选择器以选择子元素

例如：:host-context h1 定位组件视图内的 h1

:host bedeutet die Auswahl der aktuellen Komponente. [Verwandte Tutorial-Empfehlungen: „

Angular Tutorial“]

1.1 Wählen Sie das Host-Element aus

Verwenden Sie den Pseudoklassenselektor :host, um die Komponente Elemente im Hostelement (relativ zu Elementen innerhalb der Komponentenvorlage) ohne untergeordnete Elemente entsprechen der Auswahl des gesamten Hostelements. 🎜🎜Wenn Sie das folgende HTML haben:🎜

:host-context h1{
    color: hotpink;
}

🎜Der Stil der Komponente app-detail (der Stil des gesamten app-detail) ist wie folgt: 🎜

h1{
    color: hotpink;

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

🎜Browser Elements Wählen Sie das Element <code>app-detail aus. Der Stil lautet wie folgt: 🎜rrreee🎜Es ist ersichtlich, dass :host direkt darauf wirkt das Host-Element selbst🎜 🎜🎜🎜1.2 Untergeordnete Elemente des Host-Elements auswählen🎜🎜🎜🎜Sie können nach :host einen Selektor hinzufügen, um untergeordnete Elemente. Zum Beispiel: <code>:host h1 Positionieren Sie das Tag h1 in der Komponentenansicht🎜rrreee🎜🎜🎜1.3 Wählen Sie das Hostelement bedingt aus🎜🎜🎜🎜Legen Sie den Host als Ziel fest. mit Es wird nur wirksam, wenn die aktive Klasse 🎜rrreee🎜So ist: 🎜rrreee🎜🎜2 ::ng-deep🎜

🎜::ng-deep kann Ignorieren Sie die mittlere verschachtelte hierarchische Beziehung von Klassenname. Suchen Sie direkt den Klassennamen, den Sie ändern möchten. 🎜

🎜Bei Verwendung einiger Komponenten von Drittanbietern müssen Sie den Stil der Komponente ändern. In diesem Fall verwenden Sie.🎜🎜🎜🎜2.1 Vom Host-Element zum aktuellen Element zu allen untergeordneten h3-Elementen im DOM, einschließlich Die aktuelle Komponente verwendet h3-Elemente von Komponenten von Drittanbietern🎜🎜🎜rrreee🎜🎜🎜2.2 Suchen Sie nach einem bestimmten Typ unter einem bestimmten Typ🎜🎜🎜rrreee🎜🎜3 :host-context 🎜🎜Wenn eine bestimmte Bedingung erfüllt sein muss, bevor der Stil angewendet werden kann. Es sucht nach CSS-Klassen in den ancestor-Knoten des Host-Elements der aktuellen Komponente bis zum Stammknoten des Dokuments. Wenn gefunden wird, werden die folgenden Stile auf die internen Elemente von dieser Komponente angewendet. 🎜🎜🎜🎜3.1 Wählen Sie das Element im Komponentenhostelement aus🎜🎜🎜rrreee🎜🎜🎜3.2 Es wird nur wirksam, wenn der Host das Ziel ist und eine aktive Klasse hat Der Stil >background-color wird nur angewendet, wenn ein ancestor-Element (Hostelement ist ebenfalls akzeptabel) die CSS-Klasse theme-light für alle hat c1a436a314ed609750bd7c7d319db4da-Elemente in dieser Komponente. 🎜rrreee🎜🎜🎜3.3 Sie können nach :host-context einen Selektor hinzufügen, um untergeordnete Elemente auszuwählen🎜🎜🎜🎜Zum Beispiel: :host-context h1 Positionieren Sie h1innerhalb der Komponente Ansicht > Tag 🎜rrreee🎜🎜🎜3.4 kann verwendet werden, um die internen Bedingungen eines bestimmten Stils zu beurteilen🎜🎜🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAngulars :host-, :host-context- und ::ng-deep-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!