如何在Angular的同一模板中的相同路径中使用两个路由器出口标签（或相同组件）

Question

我有一个父组件，其中我有两个div，一个用于移动用户，另一个用于桌面用户。在两个div中都有一个子组件。我正在使用Fx布局来隐藏每个div，具体取决于用户是使用移动设备还是台式机。当该组件仅在移动div上运行但在桌面div上无法正常运行时，会出现问题。以下是组件的HTML代码和应用程​​序结构的图片，可帮助您理解问题。我在下面提供的HTML代码在 ListingsComponenComponent 中，并且我要在同一模板中两次使用的组件是 ListComponent（app-list）。当我说它仅适用于移动设备div时，是指 ListComponent 的两个子设备中只有一个在台式机上可以运行，而在移动设备上两个子设备都可以运行。

listings-component.component.html

<!-- FOR DESTKOP -->
<div class="container" fxHide fxShow.gt-sm>
  <div class="row">
    <div class="col-lg-6">
      <app-map-component></app-map-component>
    </div>
    <div class="col-lg-6">
      <app-list></app-list>
    </div>
  </div>
</div>


<!-- FOR MOBILE -->
<div class="container">
  <app-list></app-list>
</div>