Angular 2 - 导航到子组件时调用服务方法

Question

在帐户和个人资料之间导航时，每次都会调用 PeopleService。还可以看到人名和网站详情闪烁。

因为 Account 和 Profile 是 PeopleComponent 的子组件，而 PeopleModule 是 PeopleService 的提供者，我希望 PeopleService 仅在我第一次导航到一个人时被调用，并且对于这个人的详细信息 (name/website) 不必刷新（无闪烁）

这是一个笨蛋：http://plnkr.co/edit/ZFEYYN45o1LaLsIpJwSK

人员模块：

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 { }

人员路线：

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

人员服务

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

人员组件

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

这是 Angular 中的错误，应该在下一个版本中修复，如此处所述，

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

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

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

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

更新了您的 Plunker 以不使用延迟加载的模块并且它有效！！

干杯！！

Angular 2 - 导航到子组件时调用服务方法

Angular 2 - Service method is called when navigating to child components

angular

angular2-routing

angular2-services