Вопрос:

Почему ngOnInit вызывается каждый раз

angular typescript angular2-routing

1860 просмотра

2 ответа

208 Репутация автора

Per Angular ( https://angular.io/api/core/OnInit, в котором говорится, что ngOnInit вызывается сразу после того, как свойства директивы, связанные с данными, были проверены впервые и до того, как был проверен любой из его дочерних элементов. только один раз, когда директива создается .),

Поэтому ngOnInit следует вызывать один раз, но, как показано в плункере (это копия с https://angular.io/tutorial/toh-pt5 ), я изменил только app / heroes / heroes.component.ts и app / dashboard /dashboard.component.ts чтобы иметь console.log

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

Я посмотрел, почему ngOnInit вызывается дважды? , Разница между Конструктором и ngOnInit , Angular 2 Компонент приложения ngOnInit вызывается дважды при использовании iframe , ngOnInit вызывается каждый раз, когда я меняю маршрут

но не мог понять, почему ngOnInit вызывается каждый раз.

console.log("ngOnInit in All Heroes");
console.log("ngOnInit InDashBoard");
Автор: Neil Источник Размещён: 04.01.2018 04:06

Ответы (2)


3 плюса

1973 Репутация автора

Когда маршрут меняется, компонент уничтожается , затем, когда маршрут меняется обратно, компонент снова инициализируется .

Добавьте это, чтобы DashboardComponentубедиться в этом:

typescript
    ngOnDestroy() {
      console.log("ngOnDestroy InDashBoard");
    }
Автор: hayden Размещён: 04.01.2018 04:15

0 плюса

20082 Репутация автора

Что ж, проблема в моем случае заключалась в том, как я загружал дочерние компоненты. В @NgModuleобъекте метаданных моего декоратора я передавал child componentсвойство bootstrap вместе с parent component. Передача дочерних компонентов в свойство bootstrap сбрасывала свойства моих дочерних компонентов и заставляла OnInit()запускаться дважды.

@NgModule({
 imports: [ BrowserModule,FormsModule ], // to use two-way data binding ‘FormsModule’
declarations: [ parentComponent,Child1,Child2], //all components
 //bootstrap: [parentComponent,Child1,Child2] // will lead to errors in binding Inputs in Child components
 bootstrap: [parentComponent] //use parent components only
 })
Автор: Ramesh Rajendran Размещён: 04.01.2018 04:58
Вопросы из категории :
32x32