1つのコンポーネントから別のコンポーネントへサービスを介してAngular2でデータを送信する方法

Question

同じラベルに2つのコンポーネントがあります。あるコンポーネントから別のコンポーネントにデータを渡したいと思います。データをサービスに設定できます。私のために働いていません。私はlogin.component.tsからデータを設定し、managerdashboard.component.tsからデータを取得したいのですが、問題を解決する方法はありますか？データをサービスに設定できますが、 。私を助けてください。

sso.service.ts

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

export interface User { 
    userId:number; 
    aemUserId:string; 
    role: string; 
    authorization: string; 
    userName: string; 
} 

@Injectable() 
export class SsoService { 

    public user:User; 
    public checkedDatas:Array<any> = []; 

    setUser(user) { 
     debugger; 
     this.user = user; 
     console.log('setUser : ',this.user); 
    } 

    getUser() { 
     console.log('getUser : ',this.user); 
     return this.user; 
    } 

    isLoggedIn() { 
     return this.user && this.user.userName; 
    } 
} 

app.router.ts

import {ModuleWithProviders} from '@angular/core'; 
import {Routes,RouterModule, CanActivate} from '@angular/router'; 

import {AppComponent} from './app.component'; 
import { LoginComponent } from './login/login.component'; 

import { ManagerdashboardComponent } from './managerdashboard/managerdashboard.component'; 

export const router:Routes = [ 
    { path:'', redirectTo:'login', pathMatch:'full' }, 
    { path: 'login', component: LoginComponent }, 
     { 
     path: 'aem', 
     component: AemHomeComponent, 

     children: [ 
      { path:'manager',component:ManagerdashboardComponent }, 

    ] }, 
    // { path: '**', component: NotFoundComponent} 

]; 

export const routes:ModuleWithProviders = RouterModule.forRoot(router); 

login.component.ts

getSSO(ssoid){ 
     console.log('getSSO new : ',ssoid); 
     this.authGuard.getAuth(ssoid) 
      .subscribe(resp => { 
       console.log("getSSO response",resp); 
       here I am setting data to service 
       this.authService.setUser(resp); 
       console.log("14-08-2017",this.authService.getUser()) 
       this.router.navigate(
        ['aem', resp.role.toLowerCase()], 
        { queryParams: { role:resp.role,sso_id:ssoid,auditorName:resp.userName}} 
       ); 
      }) 

    } 

managerdashboard.component.ts

ngAfterViewInit(){ 
     //Here I am getting data from service. 
      console.log("THIS IS MOHIT TRIPATHI",this.ssoservice.getUser()); 
     } 

Answer 1

が、私はあなたがサービスファイルにデータを設定する前に、コンポーネント（ログインおよびmanagerdashboard）の両方が負荷を取得するので、あなたがサービスにデータを設定したら、これは、あるサービス

からデータを取得しておりませんログインコンポーネントからはダッシュボードコンポーネントにリダイレクトされますが、このコンポーネントはアプリの読み込み時に既に読み込まれているため、アプリを更新するまで変更はそこでトリガーされません。なぜあなたは@inputと@outputを使用していない

代替

1. ？ 可能であれば、これはコンポーネント間でデータを渡す標準的な方法なので、入出力を使用します。

2. 使用している同じ方法を使用する場合は、observable and subscribeを使用してページを更新せずに変更をリッスンする必要があります。あなたはここにこの答え

   • How do i send data from component A to component B Angular 2

Answer 2

ハイテクサービスであなたのGETステートメントは戻り値の型を持っていないを読み出すことができます。

getUser(): User { 
     console.log('getUser : ',this.user); 
     return this.user; 
    } 

あなたはthis.authService.setUser(resp);を使用してデータを設定するが、これは間違いである場合this.ssoservice.getUser()チェックを使用してデータを取得しています。

あなたはngAfterViewInitのデータを取得する必要があります。宛先コンポーネントの変数@input()を宣言してngOnchangeを実行してください。 @input()は、任意のコンポーネントでngOnChangesライフサイクルを使用するために使用できます。