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

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

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

  </div>

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

这使得flex容器只应用一些与flexbox相关的样式，在应用程序的许多地方都可以正常工作。然而，在我的例子中，当路由到这个特定的子组件时，我看到一个样式标记应用于Angular创建的ng组件元素。导致我的问题的原因是，由于某种原因，该样式包含的flexbox项覆盖了我输入的内容：主机：

您可以在屏幕截图中看到，正在应用my:host样式，但ng组件标记上的样式只是覆盖了它们。就我个人而言，我不明白为什么这里添加了一个特定的样式标签，那么其中的内容来自哪里。有人知道为什么Angular会在为路由器插座生成的HTML上添加样式标签吗？当我导航到此布线级别的其他组件时，此样式标记不存在

我认为这是我的代码中的一个问题，但我就是无法根据我所看到的内容找到应该看的地方

更新

以下是Stackblitz问题的最低复制版本：

在该示例中，您可以看到在路由器出口旁边创建的元素是如何应用样式的。这里添加的唯一依赖项是@angular/flex布局，所以它一定是做了些什么导致了这种情况。

它们来自视图封装

我相信这些类是视图封装的一部分，它可以防止角度元素从外部被样式化，并防止视图组件之间的干扰。至少他们在官方文件中是这么说的。 正如所建议的，“\u ngcontent-c0”是主机内第一个组件的命名

有棱角的材料会引起麻烦

我在GitHub上发现了一系列与封装相关的问题，它们通常似乎与使用角度材料有关，而角度材料有时似乎关闭了封装。如所述。因此，我的结论是，您对角度材质的实现可能是错误的。为了深入分析这种不必要的交互作用的机制，您可能想从阅读joh04667对您的问题的回答开始，因为它提供了指向您使用的特定材料的文档的链接

恰当的造型

这些问题的常见解决方案是使用/deep/selector覆盖样式，如上述两个共享链接中所述。还有一些关于Angular应用程序样式的非官方文章，如

意念

因此，我们的想法是使用/deep/覆盖组件中的样式，如下所示：

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

  </div>

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

考虑有效的CSS

因为我认为您使用的是SCS，所以使用/deep/selector应该可以并且应该能够成功编译，我经常使用它来设计内联SVG。然而，事实上，这个选择器似乎作为一系列与shadowdom问题相关的东西被弃用。我相信正确的通用方法是使用“影子穿透后代组合器”：

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

它的作用应该与/deep/selector完全相同。为了解释这一机制，让我引用一些官方文件

当在选择器中遇到>>>组合子或阴影穿透子组合子时，通过遍历任意数量的子列表或阴影树，将选择器匹配列表中的每个元素替换为从原始元素可访问的每个元素

基本上，它不关心包装器，而是通过咬到目标来设计它。因此，您还有一个选项可以尝试…

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

@angular/flex布局库的静态API具有在DOM容器或DOM元素上工作的指令。fxLayout是前者的一个例子，fxFlex是后者的一个例子

---

请参阅此处的文档，注意元素和容器的两个部分：

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

这里有一个关于Github的问题，我的评论和一个合适的使用方法！在my:host{}CSS中很重要：

---

到目前为止，我看到的所有渲染路由器插座都有一些角度等级，虽然我不确定它们到底来自哪里，但它们从未在渲染中造成任何问题。。。这是否会干扰应用程序的其他样式？是的，在本例中，我试图通过：host{}代码在子组件中使用列布局，但是

---

t style将组件强制成行布局。你不是在使用棱角材质吗？是的，我使用的是棱角材质5.1.0我开始怀疑它是否与我使用@Angular/flex布局有关，因为添加的样式非常特定于flexbox…谢谢你的回答，但我不清楚你到底在暗示什么。我使用的是flex布局，我知道它被认为是测试版，但我还没有看到任何迹象表明我使用的不正确。现在我不确定某个地方是否有bug，但据我所知，它不应该将任何样式应用于路由器出口元素。请参阅我的更新，其中一个超级简单的示例，仅使用@angular/flex布局作为依赖项。感谢@Emocuc的回答，但我在我自己的代码中没有使用任何视图封装，所以我不太明白这是怎么造成问题的。在我自己的代码中，我也没有使用任何/deep/选择器……只是：主机选择器来帮助设置子组件的样式。@SamStorie-ViewEncapsulation在默认情况下是Angular生态系统的一部分。比方说，它是内置的功能。默认情况下，所有角度组件，包括与路由器出口相关的组件。除非您有非常具体的更改，否则ViewEncapsulation会影响所有代码。代码中应该使用/deep/选择器，以覆盖混合样式的不需要的行为。好的，谢谢您的澄清。这对我来说有点新鲜，所以让我来探讨一下你在说什么，并在今天晚些时候回到这个问题。请看我的更新，其中一个超级简单的例子，仅以@angular/flex布局作为依赖项。@SamStorie你是指内部内容“这是路由器出口之外的一些内容”的跨度吗？我看不到那个上面有什么->