如何顯示來自響應的數據？

Question

我有這個登錄組件：

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

      ); 
      } 


} 

現在，如果用戶登錄IM響應數據安博用戶發送和導航他/home。在路線我有這樣的：

{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）設置user object在SharedService定義。

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 object在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.email}} 

注意：這可能包含一些語法錯誤，因爲此答案是手工寫入而沒有複製粘貼。

Answer 2

什麼是templateUrl？
templateUrl是這樣的：templateUrl: './home.html' 您的問題是你發送變量到LogsComponent？ 你可以嘗試：

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

      ); 
      } 


} 

在路線我有這樣的：

{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

我「 m對原始rxjs響應不太滿意，因爲我更願意處理promise，但我想你的中的res變量包含要顯示的數據。到組件之間共享數據的一種常見方法是使用服務

LoginComponent：

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

login服務

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

...現在，您的{{ response.user.email }}應顯示請求的數據。