Angular 4 ngOninit called twice

Question

I have looked up the solutions those were given in other issues and questions but I am not able to solve it still. The problem is ngOnInit called twice when component initalize for the first time. I share code below for more information.

Angular version

@angular/cli: 1.2.6 node: 6.10.3 os: darwin x64

@angular/cli: 1.2.6
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/compiler-cli: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2

//

import { DashboardService } from './../dashboard.service';
import { Component, OnInit, Input, NgZone } from '@angular/core';
import { RouterModule, Router } from "@angular/router";
import { MenuService } from './menu.service';
import { AuthService } from '../../auth/auth.service';

@Component({
  selector: 'ca-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css'],
  providers: [MenuService, AuthService]
})
export class MenuComponent implements OnInit {
  @Input() showLogo = true;
  sections: {}[];
  selectedSection: number = 0;
  constructor(
    private _menuService: MenuService,
    private _dashboardService: DashboardService,
    private _router: Router, private _authService: AuthService,
  ) { }

  ngOnInit() {
    // let user_id = this._authService.getUserId();
    // this.sections = this._menuService.getSections();
    // this.sections.map(section => {
    //   let ignored_ids = section['ignored_ids'] ? section['ignored_ids'] : [];
    //   section['blocked'] = ignored_ids.indexOf(Number(user_id)) == -1 ? false : true;
    // });
    console.log('test');

  }


  setSection(section_name: String) {
    // this._dashboardService.current_section.next(section_name);
  }
}

//Template side

<div *ngIf='sections'>
    <div class="container-fluid logo" *ngIf="showLogo">
        <img src="assets/logo_main.png">
    </div>
    <div *ngFor="let section of sections; let i=index">
        <div class="menu-component d-block" *ngIf='!section.blocked' (click)='setSection(section.section_name)' [routerLink]="[section.url]" routerLinkActive="selected">
            <i [class]="section.icon" aria-hidden="true" style="margin: 0 10px"></i> {{section.name}}
        </div>
    </div>
</div>

Answer 1

我已经创建了2个实例，谢谢！