Угловой 2 - Метод обслуживания вызывается при навигации по дочерним компонентам

Question

При навигации между учетной записью и профилем каждый раз вызывается PeopleService. Вы также можете увидеть, как лицо и данные сайта мелькают.

Поскольку учетная запись и профиль являются дочерними лицами PeopleComponent, а PeopleModule является провайдером PeopleService, я ожидаю, что PeopleService будет вызван только при первом обращении к Лицу и для деталей человека (имя/сайт) не должны обновить (без мерцания)

Здесь пока это plunker: http://plnkr.co/edit/ZFEYYN45o1LaLsIpJwSK

PeopleModule:

import { NgModule } from '@angular/core'; 

import { PeopleService } from './people.service'; 

import { PeopleComponent } from './people.component'; 

import { peopleRouting } from './people.routes'; 


@NgModule({ 
    imports: [ 
     peopleRouting 
    ], 
    declarations: [ 
     PeopleComponent 
    ], 
    providers: [ 
     PeopleService 
    ] 
}) 
export class PeopleModule { } 

PeopleRoutes:

import { Routes, RouterModule } from '@angular/router'; 

import { PeopleComponent } from './people.component'; 

const peopleRoutes: Routes = [ 
    { 
     path: ':id', 
     component: PeopleComponent, 
     children: [ 
      { 
       path: 'account', 
       loadChildren: 'app/accounts/accounts.module#AccountsModule' 
      }, 
      { 
       path: 'profile', 
       loadChildren: 'app/profiles/profiles.module#ProfilesModule' 
      } 
     ] 
    } 
]; 

export const peopleRouting = RouterModule.forChild(peopleRoutes); 

PeopleService

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class PeopleService { 

    constructor(
     private _http: Http 
    ) { } 


    get(id: number): Observable<any> { 
     console.info('person service called'); 
     return this._http 
      .get(`http://jsonplaceholder.typicode.com/users/${id}`) 
      .map(response => response.json()); 
    } 
} 

PeopleComponent

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { PeopleService } from './people.service'; 

@Component({ 
    template: ` 
     <h2> 
     {{person?.name}} <br> 
     <small>{{person?.website}}</small> 
     </h2> 
     <nav> 
     <a routerLink="account" routerLinkActive="active">Account</a> | 
     <a routerLink="profile" routerLinkActive="active">Profile</a> 
     </nav> 
     <router-outlet></router-outlet> 
    ` 
}) 

export class PeopleComponent implements OnInit { 
    person; 

    constructor(
     private _person: PeopleService, 
     private _route: ActivatedRoute 
    ) { } 

    ngOnInit() { 
     this.getPerson(); 
    } 

    getPerson() { 
     this._route.params.subscribe(params => { 
      let id = +params['id']; 
      this._person.get(id).subscribe(person => this.person = person); 
     }) 
    } 
} 

Спасибо за вашу помощь!

Answer 1

Это ошибка в Угловом, и должно быть исправлено в следующей версии, как сообщалось здесь,

https://github.com/angular/angular/issues/10814

https://github.com/angular/angular/pull/10707

import { PeopleModule } from './people/people.module'; 

    @NgModule({ 
     imports: [ 
     ... 
     PeopleModule, 
     ... 
     }) 

Обновлен своим Plunker не использовать Ленивый загруженный модуль и его работает!!

Cheers !!