angular - 在不复制子元素的情况下，如何根据设备宽度显示/隐藏父 DIV？

Question

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

<!--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>

现在对于这两个块，子级几乎保持不变（除了 img.class="cursor-pointer"），而父级 (div.class="unselected-artefacts") 的属性会根据设备方向发生变化。

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