Angular2で1つのポップアップから別のポップアップにパラメータ/値を渡す方法

Question

Angular2で最初のポップアップを開く必要があり、ユーザーがいくつかの値を入力する必要があります。あるユーザーイベント、つまりボタンをクリックすると、そのポップアップを閉じて、最初のポップアップでユーザーが入力した値で別のポップアップを開く必要があります。

私はplunkerを作成しました。このコンポーネントでは、最初のポップアップであるログインコンポーネントと2番目のポップアップであるホームコンポーネントを作成しました。ユーザー資格情報を入力すると、ホームコンポーネントに移動する必要があります。私はここで打たれました。つまり、最初のポップアップから2番目のポップアップにユーザー名の値を渡す方法、2番目のポップアップをロードして最初のポップアップを読み込む方法もあります。

この問題をお手伝いいただける方は、私のplnkrで何が必要なのか教えてください。

export class LoginModal implements CloseGuard, ModalComponent<CustomModalContext> { 
    context: CustomModalContext; 

    public username: string; 
    public password: string; 

    constructor(public dialog: DialogRef<CustomModalContext>, public modal: Modal) { 
    this.context = dialog.context; // this is the dialog reference 
    dialog.setCloseGuard(this); 
    } 

    openHome() 
    { 
    return this.modal.open(HomeModal, overlayConfigFactory({ username }, BSModalContext)); 
    } 
} 

Answer 1

ログインコンポーネントの値は、変数を作成することで共有注射可能サービスに保存する必要があります。

サービス

@Injectable() 
export class SharedService { 
    public sharedValues:any; 
} 

アプリケーションモジュール

@NgModule({ 
imports: [BrowserModule, 
     HttpModule], 
declarations: [AppComponent], 
providers: [SharedService], 
bootstrap: [AppComponent] 
}) export class AppModule { } 

アクセス以下のようにログインし、ホームコンポーネントの両方の値：

import {SharedService} from 'path of service folder'; 
export class LoginModal { 

constructor(private sharedService:SharedService) { 
} 

click() { 
    this.sharedService.sharedValues // get and set your values 
} 
} 

注：コンポーネントにSharedServiceのプロバイダを設定しないでください。共有されない場合は、共有されません。