レスポンスのデータを表示するにはどうすればいいですか？

Question

私はこのログイン・コンポーネントを持っている：

ユーザーが応答データアブーのユーザーに送信イムログインして /homeに彼をナビゲートしている今場合

import {Component, EventEmitter, Input, OnChanges} from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
import { LoginService } from '../services/login.service'; 
import { Login } from '../model/login' 
import {Router} from '@angular/router'; 
@Component({ 
    selector: 'login', 
    templateUrl: 'login-form', 

}) 
export class LoginComponent { 
    data : any; 
    // Constructor with injected service 
     constructor(
      private loginService: LoginService, 
      private router: Router 
     ){} 

     submitLogin(values){ 

      var current = this; 
      // Variable to hold a reference of addComment/updateComment 
      let loginOperation:Observable<any>; 
      loginOperation = this.loginService.Login(values); 
      loginOperation.subscribe(
       res => { 
       if(res.isLoggedIn == true){ 
        current.router.navigate(['/home']); 
       } 
       }, 
       err => { console.log(err) } 

      ); 
      } 


} 

。

{path: 'home', component: LogsComponent} 

これは私のLogsComponentです：

import {Component, EventEmitter, Input, OnChanges} from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
import {Router} from '@angular/router'; 
@Component({ 
    selector: 'dashboard', 
    templateUrl: 'home', 

}) 
export class LogsComponent { 



} 

は、だから私が欲しいもの、応答からホームビューデータにこのような何かを表示することです：

{{ response.user.email }} 

ルートでは、私はこれを持っていますどのように私はそれを行うことができますどのような提案？

Answer 1

あなたはコンポーネントがこの特定の要件にOR間共有データにしたいとき、あなたは他の回答に示されているrouter parameterで行くことができ共有サービスを使用する必要があります。

1）サービスを評価してください。

SharedService。TS

import {Component, Injectable} from '@angular2/core'; 

export class User{ 
name:string, 
email:string 
} 

@Injectable() 
export class SharedService{ 
    user:User; 
    setUserDetail(res){ 
    this.user=res; 
    } 
    getUserDetail(){ 
    return this.user; 
    } 
} 

2）アプリケーションのappcomponent/rootcompnentにSharedServiceを注入します。

appModule.ts

import {SharedService} from './SharedService'; 

@NgModule({ 
    imports:[...], 
    ... 

    providers:[SharedService]     //<<<===here 
}) 

3）はSharedServiceで定義さuser objectを設定します。

import {SharedService} from './SharedService'; 

export class LoginComponent { 
    data : any; 
    // Constructor with injected service 
     constructor(
      private loginService: LoginService, 
      private router: Router, 
      private ss:SharedService   //<<<====added in constructor 
     ){} 

     submitLogin(values){ 

      var current = this; 
      // Variable to hold a reference of addComment/updateComment 
      let loginOperation:Observable<any>; 
      loginOperation = this.loginService.Login(values); 
      loginOperation.subscribe(
       res => { 
       if(res.isLoggedIn == true){ 
        //current.router.navigate(['/home']); 

        this.ss.setUserDetail(res); //<<<===assuming res contains name and email. 
       } 
       }, 
       err => { console.log(err) } 

      ); 
      } 
} 

4）

{{user.email}} 

、ビューでLogsComponent

import {User} from './SharedService'   //<<<====added 

@Component({ 
    selector: 'dashboard', 
    templateUrl: 'home', 

}) 
export class LogsComponent { 

user:User;         //<<<====added 

Constructor(ss:SharedService){    //<<<====added 
     this.user=ss.getUserDetail();   //<<<====added 
} 

} 

5にuser object）を取得注：この回答はコピー貼り付けなしで手書きで書かれているため、これには構文エラーが含まれることがあります。ここで

Answer 2

templateUrlとは何ですか？
templateUrlこのように：templateUrl: './home.html' あなたの質問はLogsComponentに変数を送信していますか？ あなたは試すことができます：

{path: 'home:id', component: LogsComponent} 

これは私LogsComponentです：

import {Component, EventEmitter, Input, OnChanges} from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
import {Router} from '@angular/router'; 
@Component({ 
    selector: 'dashboard', 
    templateUrl: 'home.html', 

}) 
export class LogsComponent { 
    private resEmail: any; 
    constructor(
    private route: ActivatedRoute, 
    private router: Router 
) { 
} 
    this.route.params 
     .subscribe((params) => { 
      this.resEmail = params['id']; 
     }); 
} 

そして、あなたはhome.html

<span>{{resEmail}}</span> 

Answer 3

Iを持つべきルートで

import {Component, EventEmitter, Input, OnChanges} from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
import { LoginService } from '../services/login.service'; 
import { Login } from '../model/login' 
import {Router, ActivatedRoute} from '@angular/router'; 
@Component({ 
    selector: 'login', 
    templateUrl: 'login-form', 

}) 
export class LoginComponent { 
    data : any; 
    // Constructor with injected service 
     constructor(
      private loginService: LoginService, 
      private router: Router 
     ){} 

     submitLogin(values){ 

      var current = this; 
      // Variable to hold a reference of addComment/updateComment 
      let loginOperation:Observable<any>; 
      loginOperation = this.loginService.Login(values); 
      loginOperation.subscribe(
       res => { 
       if(res.isLoggedIn == true){ 
        current.router.navigate(['/home'+ res.email]); 
       } 
       }, 
       err => { console.log(err) } 

      ); 
      } 


} 

私はこれを持っています'私は約束を扱うことを好むので、生のrxjsレスポンスにはあまり慣れていませんが、res変数にsubmitLogin()の変数に表示したいデータが入っていると思います。

loginOperation.subscribe(
    res => { 
     if(res.isLoggedIn == true){ 
      LoginService.setUserData(res);     // store data in `LoginService` 
      current.router.navigate(['/home']); 
     } 
    }, 
    err => { console.log(err) } 
); 

LoginService

@Injectable() 
export class LoginService { 
    ... 
    userData: any; 
    ... 

    setUserData(data: any): void { this.userData = data; } 
    getUserData(): any { return this.userData; } 
} 

LogsComponent：

export class LogsComponent implements OnInit { 
    response: any; 

    constructor(private loginService: LoginService) {} 

    ngOnInit() { 
     this.response = this.loginService.getUserData(); 
    } 
} 

コンポーネント間でデータを共有する一般的な方法は、サービス

LoginComponentを使用することです

...あなたの{{ response.user.email }}には、要求されたデータが表示されるはずです。