Angular 弹性布局 - 重复太多

Angular flex layout - too much repetition

我正在使用 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 应用于所有兄弟姐妹?

如果 .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*/
}

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