如何通过服务将数据从一个组件发送到Angular2中的另一个组件答案

【问题标题】：How to send data from one component to another component in Angular2 through service如何通过服务将数据从一个组件发送到Angular2中的另一个组件
【发布时间】：2025-12-07 17:30:02
【问题描述】：

我在同一个标签上有两个组件。我想将数据从一个组件传递到另一个组件。我能够将数据设置为服务。但是从服务获取对我不起作用。我想从登录设置数据。 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);

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

【问题讨论】：

您是否收到任何控制台错误？为这个文件添加你的构造函数代码：managerdashboard.component.ts

标签： angular typescript service

【解决方案1】：

但我没有从服务中获取数据

这是因为在您在服务文件中设置数据之前，组件（登录和 managerdashboard）都已加载，一旦您从登录组件在服务中设置数据，您将重定向到仪表板组件，但该组件已加载在加载您的应用时，因此在您刷新应用之前不会触发更改。

替代

为什么不使用 @input 和 @output ？如果可能，您可以使用输入和输出，因为这是在组件之间传递数据的标准方式。
如果你想使用与你相同的方法，你必须使用observable and subscribe 来监听更改而不刷新页面。你可以在这里读出这个答案
- How do i send data from component A to component B Angular 2

【讨论】：

【解决方案2】：

您好，您在服务中的 get 语句没有返回类型。

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

您正在使用this.authService.setUser(resp); 设置数据，但使用this.ssoservice.getUser() 获取数据检查这是否是错误。

您正在获取ngAfterViewInit 中的数据，您应该正在获取数据。通过在目标组件中声明 @input() 变量来尝试 ngOnchange。 @input() 可用于在任何组件中使用 ngOnChanges 生命周期。

【讨论】：