Angular flex 布局 - 太多重复答案

【问题标题】：Angular flex layout - too much repetitionAngular flex 布局 - 太多重复
【发布时间】：2020-01-03 09:56:24
【问题描述】：

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

【问题讨论】：

标签： css angular angular-flex-layout

【解决方案1】：

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

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

【讨论】：

【解决方案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 */
}

【讨论】：