我想配置我的 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。我宁愿不检测屏幕尺寸,因为这似乎不是万无一失的。
最佳答案
因此,您可以使用 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
指令。
关于angular - 如何根据某人是否使用移动设备更改我的 Angular 组件 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65904777/