Question

您认为实现这一目标的最简单方法是什么？我想创建一个检查屏幕宽度的全局服务或指令，所以我可以像这样使用它

ImageTarget。

最好的方法是什么？

Answer 1

纯CSS

我建议@media次查询

@media (min-width: 1024px) {
  .mobile-element {
    display: none;
  }
}

和HTML

<div class="mobile-element">mobile element</div>

使用角度服务

如果您必须在Angular中执行此操作，或者您尝试阻止加载元素，则可以创建全局服务：

import {Injectable} from '@angular/core';

@Injectable()

export class ScreenSizeService{
      innerHeight = (window.innerHeight);
      innerWidth = (window.innerWidth);
}

将其注入app.module.ts下的providers（因此只加载一次）

将服务注入您的组件：

import {ScreenSizeService} from 'path_to_service';
...
export class SomeComponent{
  constructor(public screenSizeService: ScreenSizeService){} //injecting the service
}

然后在HTML

中使用它

<div *ngIf="screenSizeService.innerWidth < 1024">mobile element</div>

Angular 2 - 如何创建一个我只需要加载一次的全局服务

1 个答案: