角度2はサービスからオブジェクトを更新していません

Question

私はサービスとコンポーネントを持つ角度2のアプリを持っています。

サービス：

import { Injectable } from '@angular/core'; 
import { User } from '../dtos'; 
import { Http, Response } from '@angular/http'; 

@Injectable() 
export class UserService { 
    public user: User; 
    constructor(private http: Http){} 

    public authenticate(username: string, email:string) { 
     var __this = this; 
     this.http.get('https://randomuser.me/api/') 
     .subscribe((response: Response) => { 
      __this.user = new User(); 
      var respData = response.json(); 
      var userResult = respData.results[0]; 
      var seed = respData.info.seed; 
      __this.user.email = userResult.email; 
      __this.user.firstName = userResult.name.first; 
      __this.user.lastName = userResult.name.last; 
      __this.user.profilePicture = userResult.picure; 
      __this.user.id = seed; 
     }) 
    } 
} 

コンポーネント：

import { Component } from '@angular/core'; 
import { User } from '../../dtos'; 
import { UserService } from '../../services'; 

@Component ({ 
    selector: 'navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent{ 
    user: User; 
    constructor(private userService: UserService){} 

    ngOnInit(){ 
     this.user = this.userService.user; 
    } 
} 

とコンポーネントのHTMLテンプレート：

<ul class="topnav"> 
    <li><a routerLinkActive="active" routerLink="/home">Home</a></li> 
    <li><a routerLinkActive="active" routerLink="/about">About</a></li> 
    <li class="right" ><a href="#">{{user.userName}}</a></li> 
</ul> 

UserService.authenticateでhttp.getコールがで返します有効なユーザーオブジェクト、私はデータでローカルユーザープロパティを更新します。 Navbarコンポーネントは、ユーザーオブジェクトが更新されたことを登録せず、データをテンプレートに入れません。

更新されたユーザーデータをnavbarコンポーネントに表示する方法を教えてください。

Answer 1

あなたは、以下の

UserServiceの

を試すこと

export class UserService { 
    private _user: Subject<User> = new Subject<User>; 
    public get user() : string 
    { 
     return this._user; 
    } 
    constructor(private http: Http){} 

    public authenticate(username: string, email:string) { 
     var __this = this; 
     this.http.get('https://randomuser.me/api/') 
     .subscribe((response: Response) => { 
      let tempUser = new User(); 
      var respData = response.json(); 
      var userResult = respData.results[0]; 
      var seed = respData.info.seed; 
      tempUser .email = userResult.email; 
      tempUser .firstName = userResult.name.first; 
      tempUser .lastName = userResult.name.last; 
      tempUser .profilePicture = userResult.picure; 
      tempUser .id = seed; 
      this.user.next(tempUser); 
     }) 
    } 
} 

・ホープ、このことができます！