Как обновить глобальную переменную в обещании и вернуться к использованию в других компонентах - PullRequest
Новая
       37

Как обновить глобальную переменную в обещании и вернуться к использованию в других компонентах

0 голосов
/ 20 декабря 2018

Проблема в том, что у меня есть имя пользователя, которое я хочу отобразить, но не могу получить данные вне обещания.

Я создал 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)
  }
}

Ожидаемый результат должен быть sti-admin - текущий зарегистрированный пользователь.Но я получаю неопределенный ??Так что this.user не определен ..

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

getAuthStatus() - асинхронный процесс.Таким образом, к тому времени, когда часть в AppComponent ngOnInit запускается, пользователь, возможно, еще не был установлен.

Вы можете убедиться в этом, поместив точки отладки в обработчик успеха обещания и в ngOnInit.Чтобы выполнить ваше требование, вы могли бы иметь метод в userService как getUser(), который возвращает обещание (в основном включающий логику, которая есть в конструкторе UserService).

Это может быть обработано в вашем AppComponent.Более того, вы можете кешировать это и соответственно изменять логику.

0 голосов
/ 27 декабря 2018

Я понял это - просто должен был вернуть это как обещание.Таким образом, я могу просто написать this.user во всех компонентах.

0 голосов
/ 20 декабря 2018

Вы можете создать наблюдаемое и запустить событие, чтобы компонент мог его прослушать и разрешить имя пользователя

В сервисе 

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