Question

所以我有一个Angular应用程序，它具有非常基本的路由，我使用flexbox来布局我的组件。我无法弄清楚的问题是这样的代码：

  <div fxLayout="column"
       fxFlex
       class="layout__right">
    <router-outlet></router-outlet>

  </div>

路由到的子组件在其SCSS中包含以下内容：

:host {
    @include make-flex-container(column);
    flex: 1;
}

make-flex-container只应用了一些与flexbox相关的样式，并且在应用的许多地方都能正常工作。在我的情况下发生了什么，当路由到这个特定的子组件时，我看到一个style标签应用于Angular创建的ng-component元素。造成我问题的原因是由于某种原因，该样式包含的Flexbox项目覆盖了我:host的内容：

您可以在屏幕截图中看到我的:host样式正在应用，但ng-component标记上的样式只是覆盖了它们。对于我的生活，我无法理解为什么在这里添加了特定的style标签，因此其中的内容将来自何处。有谁知道为什么Angular会在为路由器插座生成的HTML上放置样式标签？当我导航到同一路由级别的其他组件时，此样式标记不存在。

我认为这是我的代码的一个问题，但我无法在我看到的地方看到它。

更新

这是Stackblitz问题的最小再现：

https://so-48451609-routing-flex-issue.stackblitz.io

在该示例中，您可以看到路由器插座旁边创建的元素如何应用了样式。唯一添加的依赖项是@angular/flex-layout，所以它必须做一些事情来导致这种情况。

Answer 1

fxLayout指令将样式应用于子元素。它在元素本身上执行此操作，不会干扰其他样式。

@angular/flex-layout库的静态API具有适用于 DOM容器或 DOM元素的指令。 fxLayout是前者的一个例子，fxFlex是后者的一个例子。

请参阅此处的文档，请注意元素和容器的两个部分：https://github.com/angular/flex-layout/wiki/Declarative-API-Overview#api-for-dom-containers

Answer 2

他们来自视图封装

我相信这些类是视图封装的一部分，可以防止角度元素从外部进行样式化，并防止视图组件之间的干扰。至少这是他们在官方文档中所说的@angular.io。根据建议@this SO post，'_ngcontent-c0'是主机中第一个组件的命名。

角质材料导致问题

我在GitHub上发现了一系列与封装相关的问题，而且它们似乎与使用Angular Material有关，而Angular Material似乎有时会以某种方式关闭封装。如描述here。因此，我得出结论，你对Angular Material的实现可能有问题。为了深入分析这种不必要的交互机制是什么，你可能想从阅读joh04667的问题答案开始，因为它提供了你所使用的特定材料文档的链接。

正确的风格

这些问题的常见解决方案是使用/ deep / selector覆盖样式，如上面的共享链接所述。还提供了许多关于样式Angular应用程序的非官方文章，例如this one。

<强> IDEA

所以我的想法是用/ deep /覆盖组件中的样式：

:host /deep/ .your_flex_class {
    @include make-flex-container(column);
    flex: 1;
}

考虑有效的CSS

因为我认为你使用Scss，所以使用/ deep / selector应该没问题并且应该成功编译（我经常使用它来设置内联SVG样式）。但是，实际上，这个选择器似乎被弃用了一大堆与Shadow DOM问题相关的东西。我相信正确的通用方法是使用'阴影刺穿后代组合'：

:host >>> .your_flex_class {
    @include make-flex-container(column);
    flex: 1;
}

它应该与/ deep / selector完全相同。为了解释这个机制，让我引用CSS Scoping Module Level 1

的官方文档

当＆gt;＆gt;＆gt;在选择器中遇到组合器（或阴影穿透后代组合子），通过遍历任意数量的子列表或阴影树，将选择器匹配列表中的每个元素替换为可从原始元素到达的每个元素。

基本上，它并不关心包装器，而是直接针对您的目标进行样式设计。所以你还有一个选择尝试......

Answer 3

好的，一旦我创建了一个这样的工作示例，我最终找到了罪魁祸首和合适的解决方法。发生的事情是在我的路由器子组件中，我使用 @ angular / flex-layout 中的fxFlex来弯曲元素。我在组件CSS的:host{}部分中应用了flexbox容器CSS，但 flex-layout 在呈现的HTML中没有看到这一点并应用了样式标记自动执行flexbox行布局。

这是Github上的一个问题我的评论以及在!important CSS中使用:host{}的合适解决方法：

https://github.com/angular/flex-layout/issues/496#issuecomment-360870510

我的Angular router-outlet元素上的这个样式属性来自哪里？

3 个答案: