javascript - Angular 8在页面加载后添加类错误: ExpressionChangedAfterItHasBeenCheckedError

Question

正如标题所示，我试图在页面加载后向 div 元素添加一个类!我有一个条件 isTrue，并且在页面加载后执行的 Angular 函数 ngAfterViewInit() 使 isTrue 值为 true ，然后添加类hideOnLoad。当然，我可以使用标准 javascript 或 jquery，但我必须以 Angular 方式进行。本质上最终的结果应该是，div.index-logo-wrapper 在页面加载后慢慢淡出。我的想法是在加载后添加一个类，逐渐降低不透明度您的输入非常感谢。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-index-section',
  templateUrl: './index-section.component.html',
  styleUrls: ['./index-section.component.scss']
})
export class IndexSectionComponent implements OnInit {
  isTrue: boolean = false;
  public innerWidth: any;
  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.innerWidth = window.innerWidth;
    if (this.innerWidth < 1000) {
      this.isTrue = true;
      alert(this.isTrue);
    }
  }
}

<section class="index-section">
  <div class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
    <figure>
      <img src="assets/icons/logo_mobile.svg" alt=" logo">
    </figure>
  </div>
  <div class="index-media-wrapper">
    <div class="media-container">
      <iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
      </p>
    </div>
  </div>
</section>

这是我的控制台中的错误:

Answer 1

您不应该更改与 Angular Hook 内的绑定(bind)相关的内容，因为这会扰乱更改检测过程。将变化检测视为绞肉机。你应该只在肉进入之前或离开之后尝试改变它——你不能在这个过程的中间改变它。

您可以做的是将其转换为 RxJs Stream 并与模板中的 async 管道一起使用。这样，Angular 就会知道在更改检测期间某些内容发生了更改，并在完成后再次重新触发它。

或者，您可以注入(inject) ChangeDetectorRef 并在更改与生命周期 Hook 内的绑定(bind)相关的内容的位置执行 this.changeDetectorRef.markForCheck() 。对于您的情况，它实际上与 async 管道相同。

这是更一般的建议，这是针对您的特定情况的解决方案，也适用于 Angular Universal(服务器端渲染):

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-index-section',
  templateUrl: './index-section.component.html',
  styleUrls: ['./index-section.component.scss']
})
export class IndexSectionComponent {
  readonly isTrue: boolean;

  constructor(@Inject(DOCUMENT) {defaultView}: Document) {
    this.isTrue = !defaultView || defaultView.innerWidth < 1000;
  }
}

当然，服务器上不会有窗口大小，但访问 window 上的属性可能会在该环境中导致错误，最好不要在 Angular 应用中直接使用 DOM API 并使用抽象无论如何，通过代币。