0

私は2つのコンポーネント、プロファイル&イメージ(両方ともルートが異なります)を持っています。 ImageコンポーネントのProfileから1つの変数にアクセスしたいとします。angular2のイベントエミッタを使用するコンポーネント間で変数を共有しますか?

BusinessListコンポーネントにはボタンが1つあります。ユーザーがそのボタンをクリックすると、ホーム・ページにリダイレクトされ、localstorageに1つの項目が追加されます。

ホームページのプロフィール、画像、連絡先が別のタブにあります。

BusinessListでボタンをクリックすると、プロファイルタブがアクティブになります。ここに私のプロファイルのコンポーネントが

​​

}

ある---私はイメージからアクセスしたい同じ変数、連絡先タブ

を - ここで私はそれを一つの変数を格納し、ローカルストレージの項目を取得しています

ここuserActionは、コンポーネント間で共有可能なデータ、

画像成分です

import { Component, OnInit} from '@angular/core'; 

@Component({ 
    moduleId: 'module.id', 
    selector: 'my-core', 
    templateUrl: '../views/business.images.html', 
}) 

export class BusinessImagesComponent{ 

constructor(private router: Router, BusinessSettingService: BusinessSettingService) { 

    BusinessSettingService.userTakenAction.subscribe(value => {this.userImageaction= !value;}) 
} 

BusinessSettingService

import { Injectable,Output,EventEmitter }  from '@angular/core'; 

@Injectable() 
export class BusinessSettingService { 

    public userTakenAction: EventEmitter<string> = new EventEmitter<string>(); 
} 

私はEventEmitterを使用して、コンポーネントのカスタムサービスを作成し、このシナリオを解決するための良い方法である、またはこれを行うには良い方法はありますか?

私は、ImageコンポーネントでuserAction値を取得できないのです。これ

+0

プロファイルとイメージのコンポーネントは、別々のページに(ルート別に)表示されていますか?または、同じページにコンポーネントとして表示されますか? –

+0

はい、別のページ(別のルート経由) – Runali

+0

何が起こったときに、あるコンポーネントが他のコンポーネントに通知するようにしますか?それに何らかのデータを送る? –

答えて

0

、1つを以下にごBusinessSettingServiceを更新し解決するために私を助けてください、

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class BusinessSettingService { 

// Observable for selection source 
    private userActionSource = new Subject<any>(); 

// Observable for selection stream 
    userActionStream$ = this.userActionSource.asObservable(); 

userActionUpdated(userAction: any) { 
    console.log('user action is: ' + userAction); 
    this.userActionSource.next(userAction); 
    } 

} 

、プロフィールや画像・コンポーネントの両方で開始あなたのBusinessSettingServiceをコンストラクタに入れ、このオブザーバに登録して値を更新するだけです。コンポーネントのコンストラクタで

:その後、

constructor (private businessSettingService: BusinessSettingService) {} 

し、それをサブスクライブして値を更新:

this.businessSettingService.userActionUpdated(this.userAction); 

同様に、あなたのイメージ・コンポーネントでは、この観測可能に加入し、次のコードを使用して更新された値を取得します。

this.businessSettingService.userActionStream$.subscribe(
    value => { 
     this.userAction = value; 
    } 
); 

希望します。

関連する問題