如何通過服務將數據從一個組件發送到Angular2中的另一個組件

我有兩個組件在同一個標籤。我想將數據從一個組件傳遞到另一個組件。我可以將數據設置爲service.But從服務我不想爲我工作。我想從login.component.ts設置數據並從managerdashboard.component.ts獲取數據。我可以如何解決該問題。我可以將數據設置爲服務，但我沒有從服務獲取數據。請幫幫我。如何通過服務將數據從一個組件發送到Angular2中的另一個組件

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);

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()); 
     }

來源

2017-08-14 Mohit

你有任何控制檯錯誤？爲此文件添加您的構造函數代碼：'managerdashboard.component.ts' – Faisal

但我沒有從服務中獲取數據

這是因爲這兩個組件（登錄和managerdashboard）獲取負載你的服務文件中設置的數據之前，一旦你服務中設定的數據從登錄組件，你會重定向到儀表板組件，但是這個組件已經在加載你的應用程序時加載，所以更改不會觸發，直到你刷新你的應用程序。

備用

爲什麼不使用的是@input和@output？如果可能，請使用輸入和輸出，因爲這是在組件之間傳遞數據的標準方式。
如果您想使用您使用的相同方法，您必須使用observable and subscribe來偵聽更改而不刷新頁面。你可以讀出這裏這個答案
- How do i send data from component A to component B Angular 2

來源

2017-08-14 09:44:21

喜在服務的GET語句沒有返回類型。

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

您使用this.authService.setUser(resp);但使用this.ssoservice.getUser()檢查，如果這是錯誤的獲取數據設置數據。

您正在獲取ngAfterViewInit中的數據，您應該獲取數據。通過在目標組件中聲明@input()變量嘗試ngOnchange。可以使用@input()在任何組件中使用ngOnChanges生命週期。

來源

2017-08-14 10:13:32

如何通過服務將數據從一個組件發送到Angular2中的另一個組件

回答

相關問題