perché ngOnInit ha chiamato due volte?

Sto cercando di creare un nuovo componente, ma il suo metodo ngOnInit () viene chiamato due volte, non so perché questo sta accadendo? Qui ho creato un componente chiamato ResultComponent che prende @Input dal componente principale chiamato mcq-component Ecco il codice:

Componente padre (MCQComponent)

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'mcq-component', template: ` 
.....
`, styles: [ ` .... ` ], providers: [AppService], directives: [SelectableDirective, ResultComponent] }) export class MCQComponent implements OnInit{ private ansArray:Array = []; .... constructor(private appService: AppService){} .... }

Componente figlio (risultato-comp)

 import { Component, OnInit, Input } from '@angular/core'; @Component({ selector:'result-comp', template: ` 

Result page:

` }) export class ResultComponent implements OnInit{ @Input('answers') ans:Array; ngOnInit(){ console.log('Ans array: '+this.ans); } }

    Qui il log della console mostra 2 volte: la prima volta mostra la matrice corretta ma la seconda volta mostra undefined , ma non sono in grado di capire perché ngOnInit da ResultComponent viene chiamato due volte?

    Perché è chiamato due volte

    In questo momento, se si verifica un errore durante il rilevamento di modifiche del contenuto / visualizzazione di figli di un componente, ngOnInit verrà chiamato due volte (visualizzato in DynamicChangeDetector). Questo può portare a errori di follow-up che nascondono l’errore originale.

    Questa informazione proviene da questo problema github


    Quindi sembra che il tuo errore potrebbe avere un’origine altrove nel tuo codice, relativo a questo componente.

    Questo mi stava succedendo a causa di un componente difettoso in html. Ho dimenticato di chiudere il tag di selezione nel componente host. Quindi ho avuto questo , invece di – prendi nota dell’errore di syntax.

    Quindi, correlato alla risposta di @dylan, controlla la struttura del tuo componente html e quella del suo genitore.

    Bene, il problema nel mio caso è stato il modo in cui stavo eseguendo il bootstrap dei componenti secondari. Nel mio object metadati del decoratore @NgModule stavo passando ‘ componente figlio ‘ nella proprietà bootstap insieme a ‘ componente padre ‘. Passare i componenti secondari nella proprietà bootstap è stato il ripristino delle proprietà dei componenti figlio e l’ triggerszione di OnInit () due volte.

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

    Mettetelo qui nel caso qualcuno finisca qui. NgOnInit può anche essere chiamato due volte se il tipo di pulsante predefinito del tuo browser è “submit”, ad esempio se hai il sotto, NgOnInit di NextComponent verrà chiamato due volte in Chrome:

      

    Per risolvere il problema, imposta il tipo:

      

    se hai usato platformBrowserDynamic().bootstrapModule(AppModule); in app.module.ts commentalo e prova. Ho avuto lo stesso problema. Penso che questo aiuti

    Ciò può accadere perché imposta AppComponent come route predefinita

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

    Nota: AppComponent è chiamato di default in angular quindi non è necessario chiamarlo

    Questo succede ogni volta che ci sono errori di modello.

    Nel mio caso stavo usando un modello di riferimento sbagliato e correggendo quello risolto il mio problema ..

    Nel mio caso, questo è accaduto quando Component implementa sia OnChanges che OnInit . Prova a rimuovere una di queste classi. È inoltre ansible utilizzare il metodo ngAfterViewInit , che viene triggersto dopo l’inizializzazione della vista, in modo che venga garantito il richiamo una sola volta.

    Mi è successo perché avevo un s all’interno di un *ngFor . Ha caricato per ogni iterazione nel ciclo.

    La soluzione, in tal caso, sarebbe quella di avere un nome univoco per ogni punto vendita o assicurarsi che ce ne sia solo uno nel DOM alla volta (forse w / an *ngIf ).