Angular：主持人无法正常工作

发布时间：2020-12-17 10:25:13 所属栏目：安全来源：网络整理

导读：如果它有一个活动的类,我想设置我的组件的样式.但它不起作用. thread.component.html divthread works!/div thread.component.css :host .active { display: block; border: 1px solid white;} app.component.html app-thread class="active"/app-thread 但

如果它有一个活动的类,我想设置我的组件的样式.但它不起作用.

thread.component.html

<div>thread works!</div>

thread.component.css

:host .active {
  display: block;
  border: 1px solid white;
}

app.component.html

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

但是,如果我删除app.comonent.html文件和thread.component.css中的活动类.它工作得很好.

thread.component.html

<div>thread works!</div>

thread.component.css

:host {
  display: block;
  border: 1px solid white;
}

app.component.html

<app-thread></app-thread>

从 docs：

Use the :host pseudo-class selector to target styles in the element
that hosts the component (as opposed to targeting elements inside the
component’s template).

所以

:host {
  display: block;
  border: 1px solid white;
}

将为整个主机设置样式,因此您的元素将继承该样式.

在这里,您要设置一个类样式.active但是：不考虑主机.

:host .active {
  display: block;
  border: 1px solid white;
}

做

:host(.active) {
  display: block;
  border: 1px solid white;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!