pourquoi ngOnInit appelé deux fois?

Question

J'ai essayer de créer un nouveau composant, mais son ngOnInit() la méthode est appelé deux fois, je n'ai pas pas pourquoi ce qui se passe? J'ai créé ici sur composant appelé ResultComponent qui prend @Entrée du composant parent appelé qcm-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){}
	....
}

Enfant Composant (résultat-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 journal de la console qui affiche 2 fois: la première fois, il montre de tableau correct mais la deuxième fois, il montre pas défini, mais je ne suis pas en mesure de comprendre, pourquoi ngOnInit de ResultComponent appelé deux fois ?

Answer 1

Pourquoi il est appelé deux fois

Maintenant, si une erreur se produit au cours de la détection des changements de contenu/voir les enfants d'un composant, ngOnInit sera appelée deux fois (vu dans DynamicChangeDetector). Cela peut conduire à un suivi des erreurs qui se cachent à l'origine de l'erreur.

Cette information provient de cette question github

---

Il semble donc que votre erreur pourrait avoir une origine ailleurs, dans votre code, relatives à cette composante.

Answer 2

Ce qui se passait pour moi à cause d'un composant défectueux html. J'avais oublier de fermer le sélecteur de balise dans le composant hôte. J'ai donc eu cette <search><search>, au lieu de <search></search> - de prendre note de l'erreur de syntaxe.

À @dylan réponse, vérifiez votre composant de la structure html et celle de son parent.

Answer 3

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

Answer 4

Et bien, le Problème dans mon cas était la façon dont j'ai été le démarrage de l'Enfant Composants. Dans ma @NgModule décorateur de métadonnées de l'objet ,j'ai été en passant ‘enfant composant"dans le bootstap bien avec le"composant parent'. Passage de l'enfant composants dans bootstap propriété a été la réinitialisation de mon enfant composants de propriétés et de faire OnInit() déclenche 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
})

Answer 5

Mettre ça ici au cas où quelqu'un le vent jusqu'ici. NgOnInit peut aussi être appelé deux fois si votre navigateur par défaut du bouton de type "submit", de dire si vous avez le ci-dessous, NgOnInit de NextComponent sera appelé deux fois dans google Chrome:

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

Pour la fixer, type de jeu:

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