主页 / 问题 / 1158681
Accepted
kompaniietst
Asked:2020-07-29 17:56:03 +0000 UTC2020-07-29 17:56:03 +0000 UTC

定义屏幕尺寸的 Angular 指令

  • 772

你能告诉我这是怎么做到的吗？我想将指令应用于模板中的必要块，它将根据值显示/隐藏 div，例如 *ifViewportSize="'mobile'" （理想情况下）。

<div *ifViewportSize="'large'">PC</div>
<div *ifViewportSize="'small'">Mobile</div>

指令：（控制台结果）https://stackblitz.com/edit/angular-ivy-wdl8ee

@Directive({
  selector: '[ifViewportSize]'
})
export class IfViewportSizeDirective {

size: string;

  config = {
    large: 992,
    medium: 768,
    small: 576
  };

  constructor(
    private elemRef: ElementRef,
    private vcRef: ViewContainerRef,
    private templRef: TemplateRef<any>) {

    window.onresize = (event) => {
      this.showElem();
    };
  }

  @Input() set ifViewportSize(size: string) {
    this.size = size;
  }

  ngOnInit() {
    this.showElem();
  }

  showElem() {
    console.log('size: ',this.size);

    if (this.config[this.size] < window.innerWidth) {
      this.vcRef.clear();
      this.vcRef.createEmbeddedView(this.templRef);
    }
    else this.vcRef.clear();
  }

}

结果，由于某种原因，该指令仅应用于最后一个 div。请告诉我这是为什么？

我还尝试（在同一个 stackblitz 项目中）创建单独的 ifMobile 和 ifTablet 指令。他们启动了 window.onresize 函数，但同样只有最后一个 div 上的指令有效。

我不明白为什么会出现这种行为。可以修吗？如果这种方式是错误的（根据屏幕大小在屏幕上显示某些块），那么如何以不同的方式完成呢？

angular

1 个回答

  1. Best Answer

    https://github.com/angular/flex-layout/wiki/Responsive-API 尝试开箱即用的类似功能，还有一项服务，您可以订阅并接收有关屏幕尺寸更改的信息。

    • 1

相关问题