angular - example - ¿Por qué se llama a ngOnInit dos veces?

navigationend angular 6

Question

ResultComponent crear un nuevo componente, ResultComponent , pero su método ngOnInit() se llama dos veces y no sé por qué sucede esto. En el código, ResultComponent hereda @Input del componente principal mcq-component .

Aquí está el código:

Componente principal (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){}
    ....
}

Componente secundario (compilación de resultados)

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

Cuando se ejecuta, console.log se muestra dos veces, la primera vez que muestra la matriz correcta pero la segunda vez que undefined . No he podido resolverlo: ¿por qué se ngOnInit a ResultComponent en ResultComponent dos veces?

Answer 1

¿Por qué se llama dos veces?

En este momento, si se produce un error durante la detección de cambios de contenido / vista hijos de un componente, se llamará a ngOnInit dos veces (visto en DynamicChangeDetector). Esto puede conducir a errores de seguimiento que ocultan el error original.

Esta información proviene de este problema de github

Por lo tanto, parece que su error puede tener un origen en otra parte de su código, relacionado con este componente.

Answer 2

Bueno, el problema en mi caso fue la forma en que estaba iniciando los componentes secundarios. En el objeto de metadatos de mi decorador @NgModule , estaba pasando '' componente secundario '' en la propiedad bootstap junto con '' componente principal ''. Pasar los componentes secundarios en la propiedad bootstap fue restablecer las propiedades de mis componentes secundarios y hacer que OnInit () se disparara dos veces.

@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 3

El ngOnInit() engancha solo una vez después de que se hayan instanciado todas las directivas. Si tiene una suscripción dentro de ngOnInit() y no está cancelada, se ejecutará nuevamente si los datos suscritos cambian.

En el siguiente ejemplo de Stackblitz, tengo una suscripción dentro de ngOnInit() y consuelo el resultado. Se consola dos veces porque se carga una vez y los datos cambian y se vuelve a cargar.

Stackblitz

Answer 4

En mi caso, esto sucede cuando Component implementa OnChanges y OnInit . Intenta eliminar una de estas clases. También puede usar el método ngAfterViewInit , se activa después de que se inicializa la vista, por lo que se garantiza que se llamará una vez.

Answer 5

En mi caso, no cancelé la suscripción a todas las suscripciones que tenía dentro de ngOnInit. Acabo de darme de baja de todas las suscripciones dentro de ngOnDestroy y eso resolvió mi problema.

Answer 6

Esto me estaba sucediendo debido a un componente defectuoso html. Olvidé cerrar la etiqueta del selector en el componente host. Así que tuve este <search><search> , en lugar de <search></search> - tome nota del error de sintaxis.

Entonces, en relación con la respuesta @dylan, verifique la estructura html de su componente y la de su padre.

Answer 7

Esto me sucedió porque tenía un nombre sin nombre <router-outlet> s dentro de un *ngFor . Se cargó para cada iteración en el bucle.

La solución, en ese caso, sería tener un nombre único para cada salida o asegurarse de que solo haya uno en el DOM a la vez (tal vez w / an *ngIf ).

Answer 8

Esto puede suceder porque configura AppComponent como su ruta predeterminada

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

Nota: AppComponent se llama por defecto en angular por lo que no es necesario llamarlo

Answer 9

Esto sucede cada vez que hay errores de plantilla.

En mi caso, estaba usando una referencia de plantilla incorrecta y corrigiendo que solucionó mi problema.

Answer 10

Para mí, esto sucedió porque registré el mismo componente dos veces en Ruta:

{
        path: ''meal-services'',
        children: [
          {
            path: '''',
            component: InitTwiceComponent,
            canActivate: [AppVendorOpsGuard],
            data: { roleWhitelist: [UserRoles.Manage] }
          },
          {
            path: '':itemID'',
            component: InitTwiceComponent,
            canActivate: [AppVendorOpsGuard],
            data: { roleWhitelist: [UserRoles.Manage] }
          }]
      },
}

Answer 11

Poner esto aquí en caso de que alguien termine aquí. NgOnInit también se puede llamar dos veces si el tipo de botón predeterminado de su navegador es "enviar", digamos que si tiene lo siguiente, se llamará dos veces a NgOnInit de NextComponent en Chrome:

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

Para solucionarlo, establezca el tipo:

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

Answer 12

Tuve un problema similar, estaba llamando a un componente y luego haciendo referencia al mismo componente a través del enrutador.

<layout>
  <router-outlet></router-outlet>
</layout>

Y la ruta de salida también apuntaba a Layout.

Answer 13

si usó platformBrowserDynamic().bootstrapModule(AppModule); en app.module.ts coméntalo e inténtalo. Yo tuve el mismo problema. Creo que esto ayuda