2017-04-02 28 views
1

各ステップを実行した後でも同じ問題が発生しています。それでもNg2サービス経由でコンポーネント間でデータを共有する

Angular2 data Sharing

共有サービスを介したコンポーネント間でデータを共有することができません。

私のワークフロー:ログインサービスを使用してログインした後、「About」ページにUserDetailsレスポンスを共有したいと考えました。

私は、ログインコンポーネントが

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { UserAccount } from '../model/userAccount.interface'; 
import { LoginService } from './login.service'; 
import { Router } from '@angular/router'; 

@Component({ 
selector: 'app-login', 
templateUrl: './login.component.html', 
}) 

export class LoginComponent { 

emailAddress : string; 
password : string; 
submitted : boolean; 
errorMessage : string; 

constructor(private loginService: LoginService, private router : Router) { 
    this.submitted = false; 
} 

login() { 
    // event.preventDefault(); 
    this.submitted = true; 
    this.loginService.getLogin(this.emailAddress, this.password).subscribe(
     u => this.router.navigate(['/about']), 
     error => this.errorMessage = <any>error); 
} 

}

== ===== ===プロバイダ

として@NgModuleでapp.module.tsでログインサービスをのみを注入しています=ログインサービス====

@Injectable() 
export class LoginService { 
    private userAccount : UserAccount[]; 

    constructor (private http: Http) {} 

getLogin(): Observable<UserAccount[]> { 
    return this.http.get(this.url) 
       .map(this.extractData); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    this.userAccount = body.data.user[0] 
    return this.userAccount || { }; 
} 

getUserDetails() { 
    return this.userAccount; 
} 
} 

======コンポーネント=====

について
export class AboutComponent implements OnInit{ 

// initialize a private variable _data, it's a BehaviorSubject 
// private _data = new BehaviorSubject<UserAccount[]>([]); 
userDetails : UserAccount[]; 
lService : LoginService; 

constructor(loginService: LoginService) { 
    this.lService = loginService; 
    this.userDetails = this.lService.getUserDetails(); 
    console.log(this.userDetails); 
} 

ngOnInit() { 

} 
} 
+0

コンポーネントの完全なコードを投稿してください。 –

+0

はログインコンポーネントを更新しました。ありがとうございました – siddh

+0

@siddh 'getUserDetails()'とは何ですか? – echonax

答えて

1

変更.map(this.extractData);

.map((res)=>this.extractData(res)); 

または.map(this.extractData.bind(this));

へのご thisは、最初の1で map関数内コンポーネントに参照のうえされていません。

+0

ありがとうトン! @echonax – siddh

+0

@siddh喜んで私は助けることができます:-) – echonax

関連する問題