Angular Universal - 不应使用超时

Question

所以我一直在尝试将我的应用程序转换为 angular universal，并且在大多数情况下都很好。但我之前读过一些“陷阱”:https://github.com/onespeed-articles/angular-universal-gotchas

这表明我不应该使用 timeout 这很烦人，因为在 angularjs 中你用它来让 View 在渲染后触发，所以你可以确定元素的尺寸是否正确等。

我还读到它在 angular 6 中仍然存在，所以我有这个指令:

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

@Directive({
  selector: '[pyb-button-group]'
})
export class ButtonGroupDirective implements AfterViewInit {
  @Input() className: string;

  @HostListener('window:resize', ['$event'])
  onResize() {
    let resize = this.resize;
    let element = this.element;
    let className = this.className;

    setTimeout(function () {
      resize(element, className);
    }, 500);
  }

  constructor(private element: ElementRef) {
  }

  ngAfterViewInit() {
    this.resize(this.element, this.className);
  }

  resize(nativeElement, className) {
    let elements = nativeElement.nativeElement.getElementsByClassName(className || 'btn-choice');
    let headerHeight = 0;

    for (var i = 0; i < elements.length; i++) {
      let element = elements[i];
      let header = element.getElementsByClassName('header');

      if (!header.length) return;

      header = header[0];
      header.style.height = 'auto'; // Reset when resizing the window

      let height = header.offsetHeight;
      if (height > headerHeight) headerHeight = height;
    }

    for (var i = 0; i < elements.length; i++) {
      let element = elements[i];
      let header = element.getElementsByClassName('header');

      if (!header.length) return;

      header = header[0];
      header.style.height = headerHeight + 'px';
    }
  }
}

当浏览器调整大小时，它会等待 0.5 秒，然后再尝试调整按钮组的大小。如果这是不好的做法，我应该改用什么？

Answer 1

您希望该代码在浏览器而不是服务器中运行。您提供的链接为您提供了解决方案:

 if (isPlatformBrowser(this.platformId)) {
      //your setTimeout here
  }