如何显示来自响应的数据？

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 }}应显示请求的数据。