Як керувати виключенням виразу Angular2 «вираз змінився після його перевірки», коли властивість компонента залежить від поточного часу

Мій компонент має стилі, які залежать від поточного часу. У своєму компоненті у мене є така функція.

  private fontColor( dto : Dto ) : string {
    // date d'exécution du dto
    let dtoDate : Date = new Date( dto.LastExecution );

    (...)

    let color =  "hsl( " + hue + ", 80%, " + (maxLigness - lightnessAmp) + "%)";

    return color;
  }

lightnessAmpобчислюється з поточного часу. Колір змінюється, якщоdtoDate за останні 24 години.

Точна помилка така:

Вираз змінився після його перевірки. Попереднє значення: 'hsl (123, 80%, 49%)'. Поточне значення: 'hsl (123, 80%, 48%)'

Я знаю, що виключення з’являються в режимі розробки лише в момент перевірки значення. Якщо перевірене значення відрізняється від оновленого значення, виключається виняток.

Тому я намагався оновити поточний час дат на кожному життєвому циклі в наступному методі гачка, щоб запобігти виключенню:

  ngAfterViewChecked()
  {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
  }

... але без успіху.

Запустити виявлення змін явно після зміни:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}

TL; DR

ngAfterViewInit() {
    setTimeout(() => {
        this.dateNow = new Date();
    });
}

Хоча це і є вирішення, інколи важко вирішити це питання будь-яким приємнішим способом, тому не звинувачуйте себе, якщо ви використовуєте такий підхід. Нічого страшного.

Приклади : початкова проблема [ посилання ], вирішено setTimeout()[ посилання ]

Як уникнути

Загалом ця помилка зазвичай трапляється після того, як ви десь додасте (навіть у батьківських / дочірніх компонентах) ngAfterViewInit. Тож перше питання - задати собі питання - чи можу я жити без ngAfterViewInit? Можливо, ви перемістите код кудись (це ngAfterViewCheckedможе бути альтернатива).

Приклад : [ посилання ]

Також

Також асинхронізуйте речі в ngAfterViewInit це може спричинити що впливає на DOM. Також можна вирішити через setTimeoutабо додавши delay(0)оператора в трубу:

ngAfterViewInit() {
  this.foo$
    .pipe(delay(0)) //"delay" here is an alternative to setTimeout()
    .subscribe();
}

Приклад : [ посилання ]

Приємного читання

Хороша стаття про те, як налагодити це та чому це відбувається: посилання

Як згадував @leocaseiro у випуску github .

Я знайшов 3 рішення для тих, хто шукає легких виправлень.

1) Перехід від ngAfterViewInitдоngAfterContentInit

2) Перехід до ngAfterViewCheckedкомбінованого з ChangeDetectorRefпропозицією № 14748 (коментар)

3) Тримайтеся з ngOnInit (), але зателефонуйте ChangeDetectorRef.detectChanges()після змін.

Їй ти ідеш два рішення!

1. Змініть ChangeDetectionStrategy на OnPush

Для цього рішення ви в основному говорите кутовий:

Зупиніть перевірку на наявність змін; Я зроблю це лише тоді, коли знаю, що це необхідно

Швидке виправлення:

Змініть ваш компонент, щоб він використовувався ChangeDetectionStrategy.OnPush

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
    // ...
}

З цим, схоже, щось більше не працює. Це тому, що відтепер вам доведеться здійснювати кутовий дзвінок detectChanges()вручну.

this.cdr.detectChanges();

Ось посилання, яке допомогло мені зрозуміти права ChangeDetectionStrategy : https://alligator.io/angular/change-detection-strategy/

2. Розуміння ExpressionChangedAfterItHasBeenCheckedError

Ось невеликий витяг з відповіді tomonari_t про причини цієї помилки, я намагався включити лише ті частини, які допомогли мені зрозуміти це.

Повна стаття показує приклади реального коду щодо кожної точки, показаної тут.

Першопричиною є кутовий життєвий цикл:

Після кожної операції Angular запам'ятовує, які значення використовував для виконання операції. Вони зберігаються у властивості oldValues ​​перегляду компонентів.

Після перевірки всіх компонентів Angular потім починає наступний цикл дайджесту, але замість виконання операцій він порівнює поточні значення з тими, які запам'ятовується з попереднього циклу дайджесту.

Наступні операції перевіряються на циклі дайджесту:

перевірте, що значення, передані дочірнім компонентам, такі ж, як і значення, які використовувались би для оновлення властивостей цих компонентів зараз.

перевірте, що значення, використовувані для оновлення елементів DOM, такі самі, як і значення, які використовувались для оновлення цих елементів, тепер виконують ті самі.

перевірки на всі дочірні компоненти

І так, помилка кидається, коли порівняні значення відрізняються. , блогер Макс Корецький заявив:

Винуватець завжди є дочірнім компонентом чи директивою.

І, нарешті, ось кілька зразків реального світу, які зазвичай викликають цю помилку:

• Спільні послуги
• Синхронне мовлення подій
• Динамічна інстанція компонентів

Кожен зразок можна знайти тут (plunkr), в моєму випадку проблема була динамічною інстанцією компонента.

Крім того, на власному досвіді я настійно рекомендую всім уникати setTimeoutрішення, в моєму випадку спричинив "майже" нескінченну петлю (21 дзвінок, який я не бажаю показати вам, як їх спровокувати),

Я рекомендую завжди пам’ятати про кутовий життєвий цикл, щоб ви могли врахувати, як на них впливати кожен раз, коли ви змінюватимете значення іншого компонента. З цією помилкою Angular каже вам:

Ви, можливо, робите це неправильно, ви впевнені, що маєте рацію?

У цьому ж блозі йдеться також:

Часто виправленням є використання правильного гака виявлення змін для створення динамічного компонента

Короткий посібник для мене - це врахувати принаймні дві речі під час кодування ( я спробую доповнити його з часом ):

1. Не змінюйте значення батьківських компонентів із компонентів його дочірніх даних, замість цього: модифікуйте їх з його батьківського.
2. При використанні @Inputі@Output директив намагайтеся уникати спроб зміни ліфтоциклу, якщо компонент не буде повністю ініціалізований.
3. Уникайте зайвих дзвінків this.cdr.detectChanges(); вони можуть викликати більше помилок, особливо коли ви маєте справу з великою кількістю динамічних даних
4. Коли використання this.cdr.detectChanges();обов'язкове, переконайтеся, що використовувані змінні ( @Input, @Output, etc) заповнюються / ініціалізуються на правій гачці виявлення ( OnInit, OnChanges, AfterView, etc)
5. Коли це можливо, видаліть, а не прихойте , це пов’язано з пунктами 3 та 4.

Також

Якщо ви хочете повністю зрозуміти кутовий рятувальний гачок, рекомендую ознайомитись з офіційною документацією тут:

• https://angular.io/guide/lifecycle-hooks

У нашому випадку ми виправили додавання changeDetection в компонент і виклик detectChanges () в ngAfterContentChecked, кодуємо наступним чином

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

Я думаю, що найкраще і найчистіше рішення, яке ви можете собі уявити, це:

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

Перевірено з кутовим 5.2.9

Невеликою роботою навколо я користувався багато разів

Promise.resolve(null).then(() => {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
    this.cdRef.detectChanges();
});

Я в основному замінюю "null" на деяку змінну, яку використовую в контролері.

Хоча вже є багато відповідей і посилання на дуже гарну статтю про виявлення змін, я хотів дати тут свої два центи. Я думаю, що перевірка існує з якоїсь причини, тому я подумав про архітектуру свого додатка і зрозумів, що зі змінами в уявленні можна впоратися за допомогою BehaviourSubjectправильного гака життєвого циклу. Тож ось що я зробив для вирішення.

• Я використовую сторонній компонент ( fullcalendar) , але я також використовую Angular Material , тому, хоча я створив новий плагін для стилізації, отримати вигляд і відчуття було трохи незручно, оскільки налаштування заголовка календаря неможлива без розгортання репо і прокат свого.

• Тож я отримав базовий клас JavaScript і потрібно ініціалізувати власний заголовок календаря для компонента. Це вимагає надання ViewChildдля того, щоб мій батько був наданий, що не так, як працює Angular. Ось чому я загорнув необхідне для мого шаблону значення у BehaviourSubject<View>(null):

  calendarView$ = new BehaviorSubject<View>(null);

Далі, коли я можу бути впевнений, що перегляд перевірено, я оновлюю цей предмет значенням із @ViewChild:

  ngAfterViewInit(): void {
    // ViewChild is available here, so get the JS API
    this.calendarApi = this.calendar.getApi();
  }

  ngAfterViewChecked(): void {
    // The view has been checked and I know that the View object from
    // fullcalendar is available, so emit it.
    this.calendarView$.next(this.calendarApi.view);
  }

Потім у своєму шаблоні я просто використовую async трубу. Без злому з виявленням змін, без помилок, працює безперебійно.

Будь ласка, не соромтеся запитати, чи потрібні вам більше деталей.

Використовуйте значення форми за замовчуванням, щоб уникнути помилки.

Замість використання прийнятої відповіді на застосування detectChanges () у ngAfterViewInit () (що також вирішило помилку в моєму випадку), я вирішив замість цього зберегти значення за замовчуванням для динамічно необхідного поля форми, щоб, коли форма пізніше оновилася, його дійсність не змінюється, якщо користувач вирішить змінити параметр у формі, яка викликала б нові необхідні поля (і призведе до відключення кнопки подання).

Це врятувало крихітний біт коду в моєму компоненті, і в моєму випадку помилку було уникнено взагалі.

Я отримав цю помилку, оскільки я оголосив змінну і пізніше хотів
змінити її значення, використовуючиngAfterViewInit

export class SomeComponent {

    header: string;

}

щоб виправити те, з чого я перейшов

ngAfterViewInit() { 

    // change variable value here...
}

до

ngAfterContentInit() {

    // change variable value here...
}