Angular flex布局-重复太多

Question

我正在使用angular flex layout的responsive API。虽然通常情况下，一切都像预期的一样，但我有时会遇到在代码中重复指令的情况。下面是一个剥离后的示例：

<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类应用于所有同级？

Answer 1

如果.parent类的所有直接子类都将拥有.mobile-cell中的样式，那么只需将其应用于父类一次，并且在css中，您可以针对父div的所有直接子.mobile-cell。

<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 */
}