角度分量上的 flex-direction 发生了神秘的变化答案

【问题标题】：flex-direction on angular component changes mysteriously角度分量上的 flex-direction 发生了神秘的变化
【发布时间】：2020-07-27 15:58:38
【问题描述】：

我有一个角度组件，它设置了 flex-direction，如下面的 CSS sn-p 所示。该组件包含在另一个组件的模板中，没有应用其他样式（没有内联样式，也没有任何东西会导致它在应用程序的任何样式表中被引用）。但是，如果我在浏览器中检查它，则会有一些元素样式覆盖 :host 规则中定义的内容（见图 1）。第一次初始化组件时，元素样式与 :host 规则相同，因此不会造成任何伤害。奇怪的是，如果组件被销毁然后重新创建（使用 ngIf 或 ngSwitch），元素样式上的 flex-direction 会切换到“行”（见图 2）。我知道有几种方法可以解决它，但是我有很多组件正在经历这种情况，我只是想了解为什么会发生这种情况。

:host {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

图。 1

图。 2

【问题讨论】：

你能在 stackblitz 中重现这个问题吗？
你的项目使用 fxFlexLayout 模块吗？
我可以看看你的html代码吗？
@Emilien 我在应用程序中使用 fxFlexLayout，但是在处理组件的宿主元素时，我只是直接应用样式，如上所示。
@ConnorsFan 现在我将接受 !import 建议。如果我还有任何问题，我将创建一个 stackblitz 来尝试深入了解它。谢谢。

标签： css angular flexbox

【解决方案1】：

您可以将 !important 添加到您的 css 行以防止您的 flex 中的任何其他更改，这可能是在您的 HTML 文件中使用 flexbox 时发生的

【讨论】：

谢谢，这确实有效，并且似乎是最容易实施的解决方法。仍然不确定元素样式是如何应用的，但这让我可以继续前进。
如果添加了两个相同的 css 属性 css，将应用最后一个（在您的代码中会发生什么），但是当您添加 ! important 时，它将应用具有重要意义的那个。跨度>

【解决方案2】：

在 Angular 中，子组件不会替换标签。

（即<router-outlet></router-outlet> 或<app-component></app-component>）

它实际上在同一级别创建了自己的托管元素，因此它使用您想要的类呈现在元素之外。

为了告诉 Angular 使用你的类，你必须在 component.ts 文件中添加“host”属性：

@Component({
  selector:'app-example',
  templateUrl: './example.component.html',
  styleUrl: ['./example.component.css'],
  host: {'class': 'desired-class'}
})

export class ExampleComponent {}

【讨论】：