Question

我写了一条指令，该指令根据屏幕尺寸隐藏元素。当页面加载时，应该被隐藏的元素将被初始化。

这是我的指令

mobile-only.directive.ts

@Directive({
  selector: '[appMobileOnly]'
})
export class MobileOnlyDirective {

  constructor(private el: ElementRef) {
    this.displayElement(window.innerWidth < 992);
  }

  displayElement(isMobile) {
    if (isMobile) {
      this.el.nativeElement.style.display = 'block';
    } else {
      this.el.nativeElement.style.display = 'none';
    }
  }
}

它是这样实现的

<div appMobileOnly>
  <app-brochure-mobile></app-brochure-mobile>
</div>

该指令的行为与预期一致，因为未将组件呈现到屏幕，但是已触发了组件中的ngOnInit函数。知道为什么会这样吗？

Answer 1

您要将组件插入DOM并仅以可视方式将其隐藏，因此ngOnInit会触发。您可以使用ngIf或其他结构指令，但是在这种情况下，CSS媒体查询是解决问题的方法。顺便说一句，您的代码不考虑窗口大小的改变。

Angular 4指令对页面加载无效

1 个答案: