Question

我有两个组件在同一个标签。我想将数据从一个组件传递到另一个组件。我能够将数据设置为service.But来自服务对我不起作用。我想从登录设置数据。 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

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

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

替代

为什么不使用@input和@output？如果可能的话，你使用输入和输出，因为这是在组件之间传递数据的标准方式。
如果您想使用相同的方法，则必须使用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生命周期。

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

2 个答案: