Пользовательская привязка свойств компонента запускается несколько раз

Question

Я заметил, что когда вы используете пользовательский компонент со свойством ввода и привязываете к нему функцию, эта функция вызывается много раз.

* 1003 Е.Г. *

<some-tag [random-input]="randomFunction()"></some-tag>

и в классе

private randomFunction() {
    console.log('Called!');
    return true
}

если вы запустите что-то простое, как это, вы увидите в консоли несколько десятков «Called!» журналы. В моем проекте randomFunction обращается к базе данных, так что это довольно раздражает.

Кто-нибудь знает, почему это происходит?

Answer 1

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

По этой причине не рекомендуется использовать функции ts в качестве входных данных для компонента.

Например, вы можете вызвать сервер / базу данных в constructor, OnInit или OnChanges, сохранить результат в локальной переменной и сделать эту переменную в качестве входных данных для компонента. Нечто похожее на это:

export class MyComp {
   dbResult: any;

   constructor(http: HttpClient) {
     http.get('/my/api/call').subscribe(result => {
       this.dbResult = result;
     });
   }
   ....
}

.. и в HTML:

<some-tag [random-input]="dbResult"></some-tag>

Как обозначение, эта функция, помеченная как private, в конечном итоге потерпит неудачу в течение ng build --prod

Answer 2

Angular должен проверить, изменилось ли значение, в противном случае он не может обновить значение внутри компонента.