Question

我有2个DIV块。一个用于XS设备，另一个用于所有其他设备。

＆＃13;

<!--For small, medium, large and X-Large devices-->
    <div *ngIf="art.isSelected == false" class="unselected-artefacts" fxLayout="row" fxShow fxHide.xs="true">
      <img src="http://lorempixel.com/30/30/" alt="user image" fxFlex="20">
      <div fxFlex="70" class="artefacts-metadata">
        <p class="artefact-title">{{art.title}}</p>
        <p>{{art.modifiedOn}}</p>
      </div>
      <img fxFlex="10 "src="./assets/plus-icon.png" alt="select" class="cursor-pointer">
    </div>

    <!--For X-small devices-->
    <div fxLayout="row" class="unselected-artefacts" fxHide fxShow.xs="hide" [style.background]="(art.isSelected == true) ? '#a3b9dd' : 'none'">
      <img src="http://lorempixel.com/30/30/" alt="user image" fxFlex="20">
      <div fxFlex="70" class="artefacts-metadata">
        <p class="artefact-title">{{art.title}}</p>
        <p>{{art.modifiedOn}}</p>
      </div>
      <img fxFlex="10" [src]="(art.isSelected == true) ? './assets/minus-icon.png' : './assets/plus-icon.png'" alt="select" class="cursor-pointer">
    </div>

＆＃13;

现在对于两个块，子节点几乎相同（除了img.class =＆＃34;光标指针＆＃34;）而父节点（div.class =＆＃34; unselected-artefacts＆＃34;）属性根据设备方向而变化。

如何在这种情况下删除重复的代码并更好地优化它？

如果不重复子元素，如何根据设备宽度显示/隐藏父DIV？

0 个答案: