Angular ngOnInit никогда не выполнялся при создании компонента внутри ngFor

#angular #angular-components #angular-lifecycle-hooks

Вопрос:

Я столкнулся с загадкой. Я нахожусь в цикле ngFor, как в этом примере:

 <div *ngFor="let rc of sortedKeys(ruleImplementations)">
    <vi-rule-contract [descriptor]="ruleDescriptors[rc]" [item]="action" [rc]="rc">
    </vi-rule-contract>
</div>

Только для одного из этих N созданных компонентов ‘vi-rule-contract’ (очень специфичного) ngOnInit не будет вызываться, только его ngOnChanges с новыми значениями для (дескриптор, rc, элемент). Для всех других ‘vi-rule-contract’ ngOnInit будет вызываться, но никогда не ngOnChanges. Итак, вот мой вопрос:

Есть ли случай, когда ngOnInit для компонента никогда не будет вызываться только его ngOnChanges?

PS Angular 6.1.10

1. @Cyril, Привет, я уверен, что могу предоставить экран печати журнала консоли. Полный пример будет нелегко предоставить, поскольку это большое приложение. Все они созданы, и я могу видеть журналы консоли. Только для одного из них он пропускает ngOnInit и переходит непосредственно к ngOnChanges. Вот скриншот журнала консоли snag.gy/EJDrjC.jpg

2. Хивага, происходит обратное тому, что ты говоришь. Самый простой пример находится в stackblitz.com/edit /… . Я полагаю, ваша проблема в том, что есть проблема с вашим компонентом

3. @Eliseo true в общем случае ngOnInit вызывается всегда. Вероятно, что-то не удается выполнить в компоненте с определенными данными. Это устаревший код, я пытаюсь его поддерживать 🙂

Ответ №1:

Проблема в том, что у вас есть функция, определяющая ваш список, что означает, что ngFor постоянно выполняется повторно, это крайне плохая практика, angular пытается спасти вас, создавая экземпляры компонентов только один раз, но изменяя входные данные.

Ваше исправление здесь заключается в том, чтобы прекратить использование функции в шаблоне и просто запускать ее при необходимости.

 <div *ngFor="let rc of sortedRuleImplementations">
    <vi-rule-contract [descriptor]="ruleDescriptors[rc]" [item]="action" [rc]="rc">
    </vi-rule-contract>
</div>

this.sortedRuleImplementations = this.sortedKeys(ruleImplementations);

Я не могу сказать из вашего кода, когда изменяются ruleImplementations, но вы могли бы сделать это в observable subscription или что-то в этом роде