Question

我有指令（自定义* ngIf），当窗口宽度超过700px时应隐藏元素。当我更改窗口大小时，我的derective不是更新，元素没有隐藏，但this.width总是更新。知道它是如何解决的吗？这是一个例子：

import { Directive, Input, TemplateRef, ViewContainerRef, HostListener,NgZone} from '@angular/core';

@Directive({
  selector: '[ifViewportSize]'
})

export class ifViewportSize {
  width:number;

  constructor(private templateRef: TemplateRef<any>, 
  private viewContainer: ViewContainerRef,  
  private ngZone:NgZone) {
    this.width = 600;

    window.onresize = (e) => {
      this.ngZone.run(() => {
        this.width = window.innerWidth; // WIDTH UPDATING
      });
    };
  }

  @Input() set ifViewportSize(size: string){
    if (this.width<700) { 
      
     // HERE IS NOT UPDATE

      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }

  }
  
}

项目代码在stackblitz

Answer 1

不使用* ngIf，这可以帮助您：

在构造函数中：

constructor(private element: ElementRef /*other dependencies*/) {
   // your code here
}

在构造函数之外使用：

@HostListener('window:resize', [])
onWindowResize(): void {
    if (window.innerWidth < 700) {
        this.element.nativeElement.style.display = 'none';
    } else {
        this.element.nativeElement.style.display = 'block';
    };
}

导入HostListener和ElementRef：

import {ElementRef, HostListener} from '@angular/core';

我希望这会对你有所帮助。

Angular 2 - 更改窗口大小时的Update指令

1 个答案: