如何在 Angular 中为不同的设备设计完全不同的模板，比如移动设备和桌面设备，还有平板电脑？

Question

所以我有一个 Angular 9 应用程序。

我有一些模型。但是手机上的模板看起来和桌面上的完全不同。

但数据（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 调用？

Answer 1

引导程序是要走的路。你应该去看看

Answer 2

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

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

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