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

我想配置我的 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 #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。我不想检测屏幕尺寸，因为这似乎并不万无一失。

因此，您可以使用以下可用数据来检测用户是否在桌面/平板电脑/移动设备上导航器用户代理 https://www.w3schools.com/jsref/prop_nav_useragent.asp.

您可以编写自己的 Angular 服务来执行此操作，但简单的解决方案是使用诸如ngx-设备检测器 https://www.npmjs.com/package/ngx-device-detector。它提供了一项服务（使用navigator.userAgent在引擎盖下），您可以将其注入到组件中以检测用户正在运行的设备/平台。

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

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根据需要指示。