Angular 弹性布局 - 重复太多

Question

我正在使用 responsive API of angular flex layout。虽然通常一切都按预期运行，但我有时运行会遇到在整个代码中重复指令的情况。这是一个剥离的例子：

<div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text1</span>
  </div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text2</span>
  </div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text3</span>
  </div>

  ....

</div>

是否有一种优雅的方法（可能涉及纯 css）来删除此重复项？例如，在断点被激活的情况下将 mobile-cell class 应用于所有兄弟姐妹？

Answer 1

如果 .parent class 的所有直接子项都将具有 .mobile-cell 中的样式，那么只需将其应用于父项一次，然后在 css 中您可以定位所有父 .mobile-cell 的直接子 div。

<div class="parent" ngClass.lt-md="mobile-cell">

  <div>
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text1</span>
  </div>

  <div>
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text2</span>
  </div>

  <div>
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text3</span>
  </div>

  ....

</div>

.mobile-cell > div{
/* your style*/
}

Answer 2

你的html

<div ngClass.lt-md="mobile-list">

    <div>
        <span fxHide fxShow.lt-md="true">Text1</span>
    </div>

    <div>
        <span fxHide fxShow.lt-md="true">Text2</span>
    </div>

    <div>
        <span fxHide fxShow.lt-md="true">Text3</span>
    </div>

    ....

</div>

你的css：

.mobile-list > div {
    /* mobile-cell css */
}
.mobile-list > div > span {
    /* mobile-label css */
}

Angular 弹性布局 - 重复太多

Angular flex layout - too much repetition

css

angular

angular-flex-layout