如何为不同的设备如移动设备和台式机以及Angular中的平板电脑设计完全不同的模板？

如何解决如何为不同的设备如移动设备和台式机以及Angular中的平板电脑设计完全不同的模板？

所以我有一个9号角的应用程序。

我有一些模型。但是，移动设备上的模板与dekstop上的模板完全不同。

但是数据（API调用）在两者（台式机，移动设备）上几乎相同。几乎。因此，它甚至在移动设备和台式机上都可能会有所不同。

但是我的问题是。这是最好的“方法”吗？还是使用媒体查询会更好？

这是针对台式机的：

<!-- <app-bar-chart></app-bar-chart> -->

<div>
  <router-outlet></router-outlet>
</div>
  <div class="w-100 d-lg-block d-md-block">
    <div class="d-none d-lg-block d-md-block">
      <mat-grid-list cols="4" rowHeight="1:2">
        <mat-grid-tile colspan="1">
          <div class="nested-grid-list">
            <mat-grid-list cols="1" rowHeight="3:2">
              <mat-grid-tile *ngFor="let card of cards; let i = index;" [colspan]="card.cols" [rowspan]="card.rows">
                <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i">
                  <mat-card cdkDrag (cdkDragEntered)="entered($event)" [cdkDragData]="i" class="dashboard-card"
                    [style.backgroundColor]="card.color">
                    <mat-card-content class="dashboard-card-content">
                      <div class="example-handle" cdkDragHandle>
                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                          <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                          </path>
                          <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg>
                      </div>
                    </mat-card-content>jhjhjhj
                  </mat-card>
                </cdk-drop-list>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </mat-grid-tile>
        <mat-grid-tile colspan="2">
          <div class="nested-grid-list">
            <mat-grid-list cols="1" rowHeight="3:1">
              <mat-grid-tile *ngFor="let card of cards2; let i = index;" [colspan]="card.cols" [rowspan]="card.rows">
                <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i">
                  <mat-card cdkDrag (cdkDragEntered)="entered2($event)" [cdkDragData]="i" class="dashboard-card"
                    [style.backgroundColor]="card.color">
                    <mat-card-content class="dashboard-card-content">
                      <div class="example-handle" cdkDragHandle>
                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                          <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                          </path>
                          <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg>
                      </div>
                    </mat-card-content>
                  </mat-card>
                </cdk-drop-list>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </mat-grid-tile>
        <mat-grid-tile colspan="1">
          <div class="nested-grid-list">
            <mat-grid-list cols="1" rowHeight="3:2">
              <mat-grid-tile *ngFor="let card of cards3; let i = index;" [colspan]="card.cols" [rowspan]="card.rows">
                <cdk-drop-list [cdkDropListConnectedTo]="drops" [cdkDropListData]="i">
                  <mat-card cdkDrag (cdkDragEntered)="entered3($event)" [cdkDragData]="i" class="dashboard-card"
                    [style.backgroundColor]="card.color">
                    <mat-card-content class="dashboard-card-content">
                      <div class="example-handle" cdkDragHandle>
                        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
                          <path
                            d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z">
                          </path>
                          <path d="M0 0h24v24H0z" fill="none"></path>
                        </svg>
                      </div>
                    </mat-card-content>
                  </mat-card>
                </cdk-drop-list>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  </div>

这是针对移动设备的：

<div class="d-flex flex-column d-block d-sm-none">
  <div style="height: 50vh">
      <app-map-element></app-map-element>
  </div>
  <div style="height: 50vh">
    <app-list></app-list>
  </div>
</div>

和地图组件如下所示：

<div id="map" class="map"></div>
<form class="form-inline">
    <label>Measurement type &nbsp;</label>
    <select id="type">
      <option value="length">Length (LineString)</option>
      <option value="area">Area (Polygon)</option>
    </select>
  </form>

所以任何建议都很好。

谢谢

或者也许是两个具有共享API调用的不同应用程序？

解决方法

只需为您提供简单的即席方式，就是针对不同设备的三个不同的代码块，您可以以不同的方式启动它们，

1. 最简单的方法是使用插件ngx-device-detector。 在* ngIf情况下使用变量，并且仅在设备为true时才加载块。 实际上，这不会加载不必要的数据。

2. 使用媒体查询（这只会隐藏数据）更改CSS。

,

引导程序是必经之路。你应该看看