Угловой нг для жизненного цикла - PullRequest
Новая
       20

Угловой нг для жизненного цикла

0 голосов
/ 09 июня 2018

Я использую *ngFor для итерации некоторых данных, таких как: 

<div *ngFor="let d of [1, 2, 3]"> {{d}} </div>

Все хорошо, и я получил результат, как и ожидалось: 

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

Затем я удивилсяесли я использую функцию вместо {{d}}, то я написал функцию: 

protected logAndReturn(item) {
    console.log(item);
    return item;
}

и использовал ее: 

<div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div>

Я получил тот же результат рендеринга HTML, что и первыйкод, но консольный вывод не был моим ожидаемым выводом.Вывод на консоль: 

1
2
3
1
2
3

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

1
2
3
1
2
3

Добавленная функция теперь вызывается 12 раз (4 раза для каждого элемента)

Вот код, который вы можете проверить самостоятельно: jsfiddle

Мой код неверен?Есть какое-нибудь решение, чтобы предотвратить эти дополнительные звонки?Почему это произошло, и кто-нибудь может объяснить это немного?

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

использование методов в представлении такое же, как использование нечистых труб.Этот код будет выполняться в каждом событии в представлении, что может быть много раз.В нашем примере метод logAndReturn() возвращает только число, поэтому можно предположить, что он будет запущен в представлении, но если он сделает что-то более сложное, это может стать большой проблемой производительности.с помощью простой программы вы можете проверить console.log, чтобы увидеть, на каком этапе выводится след «logAndReturn».Вот как выглядит новый компонент: 

export class AppComponent implements 
OnChanges,
OnInit,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy
{
  private var01: string = "default value";
  constructor( private trans: TranslatorService ){}
  ngOnChanges (){
     console.log('Trace OnChanges');
  }
  ngOnInit (){
     console.log('Trace onInit');
  }
  ngDoCheck (){
     console.log('Trace doCheck');
  }
  ngAfterContentInit(){
     console.log('Trace After Content Init');
  }
  ngAfterContentChecked(){
     console.log('Trace after contente checked');
  }
  ngAfterViewInit(){
     console.log('Trace after view init');
  }
  ngAfterViewChecked(){
     console.log('Trace after view checked');
  }
  ngOnDestroy(){
     console.log('Trace on destroy');
  }
  testRender() {
    console.log('trace 01');
    return 'This is a test that runs a console log'
  }
  (...)
}

Чтобы глубже понять, что здесь на самом деле происходит, прочитайте официальную документацию Angular 2 о жизненном цикле

0 голосов
/ 09 июня 2018

Эта проблема не имеет отношения к *ngFor, это нормальное поведение expression внутри интерполяции ({{ }}).Он вызывается angular намеренно несколько раз, чтобы проверить, изменился ли expression.Интерполяция предназначена для получения (печати) expressions и не рекомендуется для вызова methods.Он будет запускаться без необходимости.

Проблема связана с методом внутри интерполяции, а не * ngFor

...