title: Angular 2 - Service method is called when navigating to child components
body: <p>When navigating between Account and Profile, the PeopleService is being called each time. You can also see the person's name and website details flicker.</p>
  
  <p>Because the Account and Profile are children of PeopleComponent, and PeopleModule is the provider for the PeopleService, I'm expecting that the PeopleService to only be called when I first navigate to a Person, and for the person's details (name/website) not have to refresh (no flicker)</p>
  
  <p>Here's a plunker: <a href="http://plnkr.co/edit/ZFEYYN45o1LaLsIpJwSK" rel="nofollow">http://plnkr.co/edit/ZFEYYN45o1LaLsIpJwSK</a></p>
  
  <p><strong>PeopleModule:</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>PeopleRoutes:</strong></p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>PeopleService</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Injectable()
  export class PeopleService {
  
      constructor(
        private _http: Http
      ) { }
  
  
      get(id: number): Observable&lt;any&gt; {
        console.info('person service called');
          return this._http
              .get(`http://jsonplaceholder.typicode.com/users/${id}`)
              .map(response =&gt; response.json());
      }
  }
  </code></pre>
  
  <p><strong>PeopleComponent</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { PeopleService } from './people.service';
  
  @Component({
      template: `
        &lt;h2&gt;
          {{person?.name}} &lt;br&gt;
          &lt;small&gt;{{person?.website}}&lt;/small&gt;
        &lt;/h2&gt;
        &lt;nav&gt;
          &lt;a routerLink="account" routerLinkActive="active"&gt;Account&lt;/a&gt; |
          &lt;a routerLink="profile" routerLinkActive="active"&gt;Profile&lt;/a&gt;
        &lt;/nav&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  
  export class PeopleComponent implements OnInit {
      person;
  
      constructor(
          private _person: PeopleService,
          private _route: ActivatedRoute
      ) { }
  
      ngOnInit() {
          this.getPerson();
      }
  
      getPerson() {
          this._route.params.subscribe(params =&gt; {
              let id = +params['id'];
              this._person.get(id).subscribe(person =&gt; this.person = person);
          })
      }
  }
  </code></pre>
  
  <p>Thanks for your help!</p>