Question pourquoi ngOnInit a appelé deux fois?


J'essaie de créer un nouveau composant, mais son ngOnInit () méthode est appelée deux fois, je ne sais pas pourquoi cela se passe? Ici, j'ai créé sur le composant appelé ResultComponent qui prend @Contribution du composant parent appelé mcq-composant Voici le code:

Composant parent (MCQComponent)

import { Component, OnInit } from '@angular/core';

@Component({
	selector: 'mcq-component',
	template: `
		<div *ngIf = 'isQuestionView'>
			.....
		</div>
		<result-comp *ngIf = '!isQuestionView' [answers] = 'ansArray'><result-comp>
	`,
	styles: [
		`
			....
		`
	],
	providers: [AppService],
	directives: [SelectableDirective, ResultComponent]
})
export class MCQComponent implements OnInit{
      private ansArray:Array<any> = [];
	....
	constructor(private appService: AppService){}
	....
}

Composant enfant (result-comp)

import { Component, OnInit, Input } from '@angular/core';

@Component({
	selector:'result-comp',
	template: `
		<h2>Result page:</h2>

	`
})
export class ResultComponent implements OnInit{
	@Input('answers') ans:Array<any>;

	ngOnInit(){
		console.log('Ans array: '+this.ans);
	}
}

Ici, la console affiche 2 fois: la première fois, elle montre tableau correct mais la deuxième fois ça se voit indéfini, mais je ne suis pas capable de comprendre pourquoi ngOnInit de ResultComponent être appelé deux fois?


34
2017-08-05 11:10


origine


Réponses:


Pourquoi on l'appelle deux fois

En ce moment, si une erreur survient lors de la détection des changements de contenu / affichage des enfants d'un composant, ngOnInit sera appelé deux fois (vu dans DynamicChangeDetector).   Cela peut entraîner des erreurs de suivi qui masquent l'erreur d'origine.

Cette information vient de cette numéro github


Il semble donc que votre erreur puisse avoir une origine ailleurs dans votre code, liée à ce composant.


30
2017-08-05 11:13



Cela m'arrivait à cause d'un composant HTML défectueux. J'avais oublié de fermer l'étiquette du sélecteur dans le composant hôte. Donc j'ai eu ça <search><search>, au lieu de <search></search> - prendre note de l'erreur de syntaxe.

Donc, en rapport avec @dylan, vérifiez la structure de votre composant HTML et celle de son parent.


15
2017-10-15 05:38



Eh bien, le problème dans mon cas était la façon dont je démarrais les composants enfants. Dans mon @NgModule objet de métadonnées du décorateur, je passais 'composant enfant' dans le bootstap la propriété avec 'composant parent'. Passer les composants enfants dans la propriété bootstap était réinitialiser mes composants enfant Propriétés et faire OnInit () tiré deux fois.

@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
})


11
2017-12-15 16:18



Mettre cela ici au cas où quelqu'un se retrouverait ici. NgOnInit peut également être appelé deux fois si le type de bouton par défaut de votre navigateur est "submit", par exemple si vous avez le ci-dessous, NgOnInit de NextComponent sera appelé deux fois dans Chrome:

<button class="btn btn-primary" (click)="navigateToNextComponent()">

Pour le réparer, définissez le type:

<button class="btn btn-primary" type="button" (click)="navigateToNextComponent()">

7
2018-01-27 03:01



si vous avez utilisé platformBrowserDynamic().bootstrapModule(AppModule); dans app.module.ts le commenter et essayer. J'ai eu le même problème. Je pense que cela aide


5
2018-01-03 06:00



Cela peut arriver parce que vous définissez la AppComponent comme route par défaut

RouterModule.forRoot([
    { path: '', component: AppComponent }  // remove it
])

Remarque: AppComponent est appelé par défaut dans angular donc pas besoin de l'appeler


4
2018-04-25 09:14



Cela se produit chaque fois qu'il y a des erreurs de modèle.

Dans mon cas, j'utilisais une mauvaise référence de modèle et corrigeais ce problème.


3
2018-03-08 05:25



Dans mon cas, cela se produit lorsque Component implémente les deux Modifications et OnInit. Essayez de supprimer l'une de ces classes. Vous pouvez aussi utiliser ngAfterViewInit méthode, il est déclenché après l'initialisation de la vue, de sorte qu'il est garanti d'appeler une fois.


1
2018-01-23 13:09