从子组件样式化角度材料组件

Posted 2023-02-23

【中文标题】从子组件样式化角度材料组件

【英文标题】：Styling angular material components from child components

【发布时间】：2021-10-31 00:50:08

【问题描述】：

HomeComponent 模板包括一个路由器插座

/* home.component.ts */
...
<mat-sidenav-container>
<mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

这将呈现一个ListComponent，该样式应设置overflow 的mat-sidenav-content。

为什么以下不起作用？

/* list.component.css */
:host-context(mat-sidenav-content)  /* same for .mat-sidenav-content */
    overflow: unset !important;

据我了解，选择器应该选择遍历所有 DOM 到根的任何 mat-sidenav-content。

【参考方案1】：

恐怕这不是 :host-context 的工作方式。主机上下文用于根据其祖先有条件地将样式应用于组件主机。在您的示例中，列表组件应该具有溢出：未设置，但是如果它的另一个实例没有 mat-sidenav-content 作为祖先，则它不会有这个。这对于应用基于主题的样式很有用，如下面的文档所示：

https://angular.io/guide/component-styles#host-context

我在 stackblitz 上包含了一个带有溢出 css 的示例，并且在这种情况下我还将文本设置为红色，因此它更明显，您可以看到它如何应用于一个而不是另一个。不幸的是，当组件位于父级内部时，我认为您无法尝试将样式应用于父级。

为了完整起见，我在另一个组件中也有 ::ng-deep 的示例，因为我已经看到一些人曾经将样式应用于其他组件。我建议你远离这个，因为这种风格在首次应用后会保留（尝试转到该链接，然后返回列表）并且 ::ng-deep 无论如何都已弃用。

https://stackblitz.com/edit/angular-material-sidenav-generate-nav-5fvfjq?file=src/app/list/list.component.css

编辑：stackblitz 已更新为包含 :host 的示例

最好用 html 术语而不是组件来考虑宿主元素，因此在 dom 中 <app-list> 是宿主元素而不是模板中的内容。如果您想在其中设置样式，则无需使用 :host。我更新了我的 stackblitz 示例以包含主机，如果您检查 css，您可能会更好地了解它是如何工作的。

HTML 看起来像这样

<app-list _nghost-qnl-c20="">
  <p _ngcontent-qnl-c20=""> This text should be red only when inside mat-sidenav-content. The font family is set by host.
  </p>
</app-list>

还有css：

mat-sidenav-content[_nghost-qnl-c20], mat-sidenav-content [_nghost-qnl-c20] 
    color: red;

[_nghost-qnl-c20] 
    font-family: Arial, Helvetica, sans-serif;

所以你可以看到 host 使用了一个由 angular 生成的属性，而 :host 本身就是该属性，而 :host-context(element) 成为 css 中的元素 [attribute]。

【讨论】：

在我的例子中主机组件不是HomeComponent吗？

我明白了，但我误解了host 组件的概念，因为我认为HomeComponent 正在托管ListComponent，这是托管组件

不，它实际上是 ListComponent。我已经更新了我的 stackblitz 示例以包含主机，如果您检查 css，您可能会更好地了解它是如何工作的。我已在答案中添加了详细信息。

实际上我说它是 ListComponent 但实际上它是在 dom 中创建的元素，比如我的示例中的 。我在答案中添加了更多内容，抱歉我是新来回答问题的人，我觉得我做了太多修改，可能有点混乱。