Цикл обнаружения угловых изменений запускается с помощью геттеров внутри шаблона - PullRequest
Новая
       30

Цикл обнаружения угловых изменений запускается с помощью геттеров внутри шаблона

0 голосов
/ 22 марта 2019

Кажется, использование сеттеров внутри шаблонов приводит к тому, что обнаружение угловых изменений входит в цикл (геттер вызывается сотни раз).После прочтения тонны подобных вопросов я не могу получить четкий ответ.

Справочная информация:

Я считаю, что использование геттеров внутри шаблона - этосамый чистый подход с точки зрения ремонтопригодности, однако, по-видимому, потому что Angular не может знать, изменилось ли значение геттера, пока он не вызовет его, он просто вызывает его все время.До сих пор я нашел три альтернативы:

  1. Прекратить использование геттеров, сделать все свойства общедоступными и получить к ним прямой доступ
  2. Сохранить значение каждого геттера в открытом свойстве компонента и связать еговместо получателя в шаблоне
  3. Измените режим Angle changeDetection со стандартного на onPush

Вариант 1 может показаться нелогичным в пользу использования классов Typescript.Вариант 2 может показаться ненужным дублированием кода и снизить удобство сопровождения, вариант 3 потребует значительного рефакторинга.

Вот пример (упрощенный для иллюстративных целей)

Модель: 

export class UserModel { 
  private id: string;

get getId() {
    console.log('Getting id');
    return this.id; 
}
set setId(id) {
   this.id = id;
}
constructor() {
}
}

Component.html 

<h1>Test</h1>
<p>{{user.getId}}</p>

Component.ts 

  import {Component, OnInit} from '@angular/core';
    import {TestModel} from './test.model';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      public user: UserModel;

    ngOnDestroy() {
      if (this.userObserver) { this.userObserver.unsubscribe(); }
    }

    ngOnInit() {
      this.userObserver = this.userObservable.subscribe(
      (data: UserModel) => {
        this.user = data;
      },
      (err: any) => {
        console.error(err);
      });
    }
  }

Выводит следующий консольный журнал: console.log output

Кто-нибудь может порекомендовать лучший способ избежать ненужных циклов при работе со сложными моделями в Angular?Или даже правильный способ отладки этого типа поведения, в том виде, в каком он сейчас существует, я console.logging методы getter и слежу за всплесками использования памяти.

EDIT (Ответ) Через некоторое времяисследуя, копаясь в следах стека, я обнаружил, что цикл обнаружения бесконечных изменений на самом деле вызывается сервисом, который мы внедряем, называемым «Sentry».Очевидно, это вызывает проблему при использовании console.log, которая запускает обнаружение изменений.Нашел здесь проблему с github: github.com / getsentry / sentry-javascript / Issues / 1883 Не нашел решения (кажется несовместимым по своей природе), обновлю, если найду исправление.

...