Angular 4组件和css flex命令

Question

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

这是一个简单的导航风格设置使用display: flex;和order来定位元素

元素使用弹性顺序对它们进行排序1,2,3,4

这是基本的，但实际代码需要订单。

顶部导航只是html中的四个div，它们被命令为1,2,3,4

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

“Three”组件中的html和类与顶部nav中的“Three”相同。

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

问题是当角度渲染你的组件时，它用一个名为three的元素包裹它的内部视图。检查DOM时，您会看到它。要修复它，你必须在你的css文件（three或组件css文件）中命令style.css，如下所示

在style.css

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

或组件css文件

three {
    order: 3;
}