angular - 如何根据某人是否使用移动设备更改我的 Angular 组件 HTML？

Question

我想配置我的 Angular 9 应用程序以根据是否有人使用移动设备查看组件来显示不同的组件。当我以前用 Python 构建模板时，有一个 user_agents 包可以让我根据移动路径检测和提供不同的 HTML

{% load user_agents %}
...
{% if not request|is_mobile and not request|is_tablet %}
            <td>{{ item.category }}</td>
            <td><a href="{{ item.path }}">{{ item.title }}</a></td>
            <td align="center">{{ item.created_on }}</td>
{% else %}
            <td>
                <div>
                    {{ item.category }} · {{ item.created_on_fmted }}
                </div>
                <div>
                    <a href="{{ item.mobile_path }}">{{ item.title }}</a>
                </div>
            </td>
{% endif %}

现在我正在使用 Angular 构建，我的常规设备有下面的 mat-table

<mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef> category </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.category.path }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
      <mat-cell *matCellDef="let item"><a href='{{ item.path }}'>{{ item.title }}</a></mat-cell>
    </ng-container>

    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.created_on }}</mat-cell>
    </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

但我不清楚 Angular 的方法是什么来检测我是否在移动设备上并适本地更改 HTML。我宁愿不检测屏幕尺寸，因为这似乎不是万无一失的。

Answer 1

因此，您可以使用 Navigator userAgent 中的可用数据检测用户是否在台式机/平板电脑/移动设备上.

您可以编写自己的 Angular 服务来执行此操作，但简单的解决方案是使用诸如 ngx-device-detector 之类的库。 .它提供了一项服务(在后台使用 navigator.userAgent)，您可以将其注入(inject)组件以检测用户正在运行的设备/平台。

您可以在您的组件中使用它，例如:

constructor(private deviceService: DeviceDetectorService) {}

isMobile = this.deviceService.isMobile();

然后在你的模板中:

<div *ngIf="isMobile">I only appear on mobile</div>

更好的方法是将它包装在一个指令中，这样您就不必在许多组件中重复这段代码。

import { Directive, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
  selector: '[isMobile]'
})
export class IsMobileDirective implements OnInit {

  constructor(private deviceService: DeviceDetectorService,
              private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) { }

  ngOnInit() {
    if (this.deviceService.isMobile()) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

现在，您只需在组件模板内的任何元素上使用此指令，即可轻松地根据设备呈现内容(请注意，此结构指令需要星号):

<div *isMobile>I only appear on mobile</div>

同样，您还可以根据需要创建 isDesktop、isTablet、isNotMobile 指令。