Angular 4 组件和 css flex 顺序

Question

我这里有一个笨蛋 - https://plnkr.co/edit/rnN8oQAsIcYWjsjQHfuk?p=preview

这是一个简单的导航样式，使用 display: flex; 和 order 来定位元素

元素使用 flex order 将它们排序为 1, 2, 3, 4

这是基本的，但实际代码需要顺序。

顶部导航只有 html 中的四个 div，它们的顺序是 1、2、3、4

底部导航与顶部导航相同，但添加了“三”元素作为组件。

“三”组件中的 html 和类与顶部导航中的“三”相同。

flex 顺序似乎不适用于 Angular 组件。

谁能告诉我为什么这不起作用以及如何解决它。

<div class="nav-container">

  <div class="nav">

    <div class="nav-item nav-item-one">
      One
    </div>

    <div class="nav-item  nav-item-two">
      Two
    </div>

    <div class="nav-item  nav-item-three">
      Three
    </div>

    <div class="nav-item  nav-item-four">
      Four
    </div>

  </div>

</div>


<div class="nav-container">

  <div class="nav">

    <div class="nav-item nav-item-one">
      One
    </div>

    <div class="nav-item  nav-item-two">
      Two
    </div>

    <three></three>

    <div class="nav-item  nav-item-four">
      Four
    </div>

  </div>

</div>

Answer 1

问题是当 Angular 渲染你的组件时，它用一个名为 three 的元素包裹它的内部 View 。当您检查 DOM 时，您会看到它。要修复它，您必须在您的 css 文件(style.css 或组件 css 文件)中对 three 进行排序，如下所示

在 style.css

.nav-item-three, three{
    order: 3;
}

或组件css文件

three {
    order: 3;
}