Angular 5 - Material Angular - Входы реагируют очень медленно на набор текста - PullRequest
Новая
       54

Angular 5 - Material Angular - Входы реагируют очень медленно на набор текста

0 голосов
/ 07 ноября 2018

У меня проблема с реактивностью угловых элементов matInput в моем приложении.

Вот как структурировано мое приложение:

  • У меня есть компонент SVG, в котором я рисую несколько элементов SVG, обернутых в угловые компоненты (квадраты, круги ... и т. Д.), Используя ngFor.

  • Каждая из этих форм SVG может открыть matMenu, чтобы пользователь мог настроить некоторые параметры, связанные с выбранной формой.

  • Внутри этих matMenu у меня есть элементы mat-select или matInputs, которые позволяют мне редактировать параметры формы.

Вот часть HTML-кода menu-item-component, которая используется в matMenu: 

<ng-container [ngSwitch]="interfaceType">

  <mat-list-item *ngSwitchCase="'input'">
    <form autocomplete="off">
      <mat-form-field>
        <input matInput
               [placeholder]="paramDisplayName"
               [value]="paramValue"
               [formControl]="inputValue">
      </mat-form-field>
    </form>
  </mat-list-item>

  <mat-list-item *ngSwitchCase="'select'">

...........

Компонент ввода имеет прослушиватель FormControl

On ValueChanges: он фильтрует то, что было введено во ввод, перед его отображением, и после 300 мс времени отката редактирует значение «paramValue» через сервис высокого уровня. 

    this.inputValue = new FormControl();
    this.inputValueSubscription = this.inputValue.valueChanges
      .map(val => this.filterValue(val))
      .do(val => { this.inputValue.setValue(val, { emitEvent: false }); }) 
      .debounceTime(300)
      .subscribe(val => { this.updateParamValue(val); });

Код работает правильно. Однако ...

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

Но через несколько минут, открывая и закрывая меню различных форм SVG и редактируя их, входы начинают становиться медленнее ... и очень медленными ... до тех пор, пока для ввода не потребуется 1-2 секунды, чтобы вход реагировал и отображал набранное значение.

Вот что я попробовал:

  • Я обернул содержимое меню с помощью ngIf, чтобы уничтожить все компоненты (среди которых входы) внутри меню, когда оно закрыто. Я полагаю, что все компоненты уничтожаются должным образом (проверено с помощью ngOnDestroy и console.log), но проблема остается.

  • Я отписался для слушателей, когда компонент уничтожен. Без улучшений

  • Я полностью удалил прослушиватель FormControl и отключил вход от остальной части приложения: у меня все еще есть проблема, хотя элемент ввода больше ни с чем не связан. Ясно, что это не происходит от функций фильтрации или обновления. Это материальный вопрос.

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

Кто-нибудь сталкивался с подобной проблемой? Есть идеи, что мне еще попробовать?

вот версии, которые я использую 

"dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.5",
    "@angular/material": "^5.2.5",

Спасибо

...