如何更新承诺中的全局变量并返回在其他组件中使用

Question

问题是我有一个我想显示的用户名，但无法在承诺之外获取数据。

我已经制作了一个user.service.ts，并将其包含在app.module.ts中。然后在app.component.ts中，我将用户设置为等于返回的数据，但是它不起作用。为什么不可能在这样的承诺中更新全局变量？

user.service.ts

import { Injectable } from '@angular/core';
import { AuthGuardService } from './auth-guard.service';
@Injectable({
  providedIn: 'root'
})
export class UserService {
public user: string;
constructor(private authService: AuthGuardService) {
  this.authService.getAuthStatus().then(data => {
    console.log(data.username)
    this.user = data.username;
    return this.user;
  });
 }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, Route  } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service';
import { CookieService } from 'ngx-cookie';
import { Window } from 'selenium-webdriver';
import { UserService } from './services/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Fordringsadministration';
private previousUrl: string = undefined;
private currentUrl: string = undefined;
public user: string;
   constructor(
     private router: Router,
     public userService: UserService,
     private cookie: CookieService
  ) {
  ngOnInit() {
    this.user = this.userService.user;
    console.log(this.user)
  }
}

预期结果应为stimin-这是用户登录的当前。但是我不确定吗？所以这个。用户不确定..

Answer 1

getAuthStatus()是一个异步过程。因此，与此同时，AppComponent的ngOnInit中的作品可能还没有设置。

您可以通过将调试点放置在承诺的成功处理程序和ngOnInit中来验证这一点。为了达到您的需求，您可以使用userService中的getUser()中的方法，该方法返回承诺（基本上封闭了UserService构造函数中的逻辑）。

这可以在您的AppComponent中处理。此外，您可以缓存此问题并相应地修改逻辑。

Answer 2

您可以创建一个可观察的事件，以便组件可以收听并解决用户名

在服务中

private _onUserName: Subject<string> = new Subject();
onUserName: Observable<string> = this._onUserName.asObservable();
constructor(private authService: AuthGuardService) {
  this.authService.getAuthStatus().then(data => {
    console.log(data.username)
    this.user = data.username; 
    this._onUserName.next() //fire the event
  });
}

和在组件中订阅

  ngOnInit() {
     this.userService.onUserName.subscribe(item => { 
        console.log(this.userService.user)
    });
  }

Answer 3

我弄清楚了 - 只需要将其作为承诺归还。这样，我就可以在所有组件中写下this.user。