时间戳

首页 > 解决方案 > 用户代理嗅探分配模板时出错

angular - 用户代理嗅探分配模板时出错

问题描述

我正在尝试根据用户代理检测分配模板，但是每当我编译脚本时，都会收到以下错误：

ERROR in ./src/app/home/home.component.ts
Module not found: Error: Can't resolve ' (isMobile) ? './home.component.mobile.html' : './home.component.html''

移动.ts

const regex_mobile = new RegExp(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/, 'i');
export const isMobile = regex_mobile.test(window.navigator.userAgent);

home.component.ts

import { Component, OnInit } from '@angular/core';
import { isMobile } from '../../providers/mobile/mobile';

@Component({
  templateUrl: (isMobile) ? './page.component.mobile.html' : './page.component.html'
})
export class HomeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

我该如何解决？

标签： angular

解决方案

不用自己编写，只需使用 angular 的 cdk 包中的 angular 断点观察器

npm install @angular/cdk

import { Breakpoints, BreakpointState, BreakpointObserver } from '@angular/cdk/layout';


export class HomeComponent {
    isMobile: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);

    constructor(private breakpointObserver: BreakpointObserver) {}
}

在您的模板中，您可以使用async管道进行检查

<div *ngIf="(isMobile | async).matches"></div>

推荐阅读