Angular Academy · 课时

Host 与 Host-Context 样式

Q: 「Host 与 Host-Context 样式」这节课中我会学到什么？

设置组件宿主元素的样式。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

设置组件宿主元素的样式。

Host 与 Host-Context 样式 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

设置宿主元素样式

组件会在自己的宿主元素（即其选择器标签）内部渲染。特殊的 :host 伪类可让您从组件 CSS 中设置该元素的样式。

<code>:host</code> 选择器

使用 :host 定位组件自身的元素，例如为它设置显示方式和间距。

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

为什么需要 <code>:host</code>

如果不使用 :host，就无法从组件内部设置宿主元素的样式，因为作用域选择器只能匹配模板内部的元素。

带条件的 :host

您可以向 :host() 传入选择器，仅在宿主元素匹配该选择器时设置其样式，例如宿主元素具有某个类时。

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

绑定宿主类

将 :host() 与宿主类绑定结合起来，即可根据组件自身的状态设置组件样式。

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

<code>:host-context</code> 选择器

:host-context() 会根据任意祖先元素上的条件设置组件样式，而不是根据宿主元素自身的条件设置。它非常适合用于主题设置。

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

主题示例

如果树层级上方的父元素具有 dark-theme 类，该规则就会生效，从而让一个祖先元素切换嵌套组件的外观。

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host 与 :host-context

:host 检查组件自身的元素；:host-context 检查祖先元素。对于自身状态，请使用 host；对于主题等继承而来的上下文，请使用 host-context。

与后代选择器结合

您可以将 :host-context 与后代选择器串联起来，根据祖先元素的上下文设置内部元素的样式。

:host-context(.compact) .title {
  font-size: 12px;
}

宿主显示方式的默认值

自定义元素的宿主默认以行内方式显示。在 :host 上设置 display: block 是常见的第一条规则，这样布局行为会更加可预测。

:host {
  display: block;
}

实际用途

使用宿主样式可以控制组件的外部框、响应自身状态，并适应周围的主题类，同时保持样式封装且灵活。

快速检查

测试您对宿主样式的理解。

回顾

使用 :host 设置组件自身元素及其状态的样式，使用 :host-context() 响应祖先元素的类以实现主题设置。在宿主元素上设置 display: block 是一个实用的默认设置。

常见问题解答

「Host 与 Host-Context 样式」课时是免费的吗？

是的 — 「Host 与 Host-Context 样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「Host 与 Host-Context 样式」这节课中我会学到什么？

设置组件宿主元素的样式。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Host 与 Host-Context 样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy