pourquoi ngOnInit a appelé deux fois?

Question

pourquoi ngOnInit a appelé deux fois?

J'essaie de créer un nouveau composant, mais sa méthodengOnInit () est appelée deux fois, je ne sais pas pourquoi cela se produit? J'ai créé ici sur composant appelé ResultComponent qui prend @Input 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 console journal montrant 2 fois: la première fois qu'il montre Tableau correct {[4] } mais la deuxième fois qu'il montre undefined , mais je ne suis pas capable de comprendre, pourquoi ngOnInit de ResultComponent être appelé deux fois ?

35

angular ngoninit

demandé sur trungk18 2016-08-05 14:10:18

9 réponses

score 31 · Answer 1

Pourquoi il est appelé deux fois

En ce moment, si une erreur se produit lors de la détection des changements de contenu/voir les 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 provient de ce problème github

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

score 15 · Answer 2

Cela m'arrivait à cause d'un composant HTML défectueux. J'ai oublié de fermer la balise sélecteur dans le composant hôte. J'ai donc eu ceci <search><search>, au lieu de <search></search> - Prenez note de l'erreur de syntaxe.

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

score 12 · Answer 3

Eh bien, le problème dans mon cas était la façon dont j'amorçais les composants enfants. Dans mon @NgModule décorateur de métadonnées de l'objet ,j'ai été en passant ‘composant enfant " dans le bootstap propriété avec ‘composant parent’. Le passage des composants enfants dans la propriété bootstap a été Réinitialiser Mes composants enfants Propriétéset faire OnInit() déclenché 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
})

score 8 · Answer 4

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

score 7 · Answer 5

Mettre ceci 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", disons que 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 type:

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

score 4 · Answer 6

Cela peut se produire parce que vous définissez le AppComponent comme route par défaut

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

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

score 3 · Answer 7

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 cela corrigeait mon problème..

score 1 · Answer 8

Dans mon cas, cela se produit lorsque le composant implémente à la fois OnChanges et OnInit. Essayez de supprimer une de ces classes. Vous pouvez également utiliser la méthodengAfterViewInit , elle est déclenchée après l'initialisation de la vue, de sorte qu'elle est garantie d'être appelée une fois.

score 0 · Answer 9

Cela m'est arrivé parce que j'avais des <router-outlet>sans nom à l'intérieur d'un *ngFor. Il est chargé pour chaque itération dans la boucle.

La solution, dans ce cas, serait d'avoir un nom unique pour chaque point de vente ou de s'assurer qu'il n'y en a qu'un seul dans le DOM à la fois (peut-être w / an *ngIf).

Las etiquetas más populares

pourquoi ngOnInit a appelé deux fois?

9 réponses

Pourquoi il est appelé deux fois