Angular2,跨组件持久化服务结果



尝试为Angular 2应用程序创建登录服务(AuthService),但我总是遇到意想不到的事情。我试图完成的是拥有一个用户对象,在登录后,在应用程序中的任何地方都可以使用。如果用户退出并重新登录,则应该通过在ngOnInit函数中获取用户在其他组件中进行更改。

class Service {
    private user: User;
    constructor(private http: Http) {
    }
    login(user, pass) {
        //login stuff, set this.user;
    }
    getUser() {
        return this.user
    }
}

我只在bootstrap中声明了一次服务

const SERVICE_PROVIDERS = [
    AuthService
]
@NgModule({
    bootstrap: [App],
    providers: [
        SERVICE_PROVIDERS
    ]
}) 

然后在几个组件中使用它。想想路线周围的警卫、基本用户详细信息的显示,或者在某个地方显示登录者的姓名。用法如下:

export class Login {
    user: User;
    constructor(private router: Router, private authService: AuthService) {
    }
    ngOnInit() {
         this.user = this.auth.getUser();
    }
}

这样AuthService在每个组件中实例化一次。这样,用户在注销和返回时也不会更改。因此,我知道用户变量在Login组件的服务对象中发生了变化,但是当我导航到那里时,ngOnInit仍然获取旧的用户对象。我路线周围的守卫也使用老用户。

编辑看起来每个组件都有自己的服务实例,这意味着它们都有自己的user实例。我不想每次登录用户时都回到数据库。

你可以试试下面的

class Service {
    private _user: Subject<User> = new Subject<User>;
    public get user() : string
    {
        return this._user;
    }
    constructor(private http: Http) {
    }
    login(user, pass) {
        //login stuff, set this.user;
        // after setting user call this.user.next(<new user object>);
    }
}
// using user object
// serviceinstance.user.subscribe(res => { you will get user object here.. })

希望这有帮助!!

最新更新