Блог

Итак, я занимаюсь этим уже некоторое время и не могу понять, почему я продолжаю возвращать пустой наблюдаемый.

Обслуживание:

 import { Injectable } from '@angular/core';
import { WebApiService } from './web-api-service';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private currentUserName: Subject<any> = new BehaviorSubject<any>({});
  private currentUser: Subject<any> = new BehaviorSubject<any>({});

  constructor(private webApi: WebApiService) { }

  setCurrentUsername(username) {
    this.currentUserName.next(username);
  }

  setCurrentUser(user) {
    this.webApi.GetMenuItems(JSON.stringify(user)).subscribe(response => {
      if (response !== []) {
        let res = response.d.replace(/n|r/g, ""); //eliminate new line and return characters
        res = JSON.stringify(eval("("   res   ")")); //convert string to valid json
        res = JSON.parse(res); //convert to javascript object
        this.currentUser.next(res); //store object
      }
    });
  }
  
  get username() {
    return this.currentUserName.asObservable();
  }

  get user() {
    return this.currentUser.asObservable();
  }
}
  

Домашний компонент:

 import { Component, OnInit, OnDestroy } from '@angular/core';
import { ColorGeneratorService } from '../../services/color-generator.service';
import { AuthService } from '../../services/auth.service';
import { Subscription } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit, OnDestroy {

  user: Subscription;
  username: string ;

  roleArray: Array<any>

  constructor(private auth: AuthService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.username = this.route.snapshot.paramMap.get('username');

    this.auth.setCurrentUsername(this.username);
    this.auth.setCurrentUser({ username: this.username });
    
    this.user = this.auth.user.subscribe(user => { 
      this.roleArray = user.roles;
    }); 
  }
}
  

Вторичный компонент:

 import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-subject-page',
  templateUrl: './subject-page.component.html',
  styleUrls: ['./subject-page.component.scss']
})
export class SubjectPageComponent implements OnInit {

  user: Subscription;
  username: string;

  constructor(private auth: AuthService) { }

  ngOnInit() {
    this.user = this.auth.user.subscribe(user => { 
      console.log(user);
    }); 
  }
}
  

Таким образом, домашний компонент «устанавливает» пользователя в службе аутентификации и имеет кнопку, которая ссылается на компонент subject-page. Но как только я нажимаю кнопку на домашней странице и направляюсь к компоненту страницы темы, консоли.войдите в компонент subject-page, который вернет только пустой объект {}, как если бы пользователь никогда не был установлен. Stackblitz пример проблемы здесь

Я обнаружил, что в моем файле шаблона я фактически использовал standard <a href="/some-link">Click Me</a> вместо <a routerLink="/some-link">Click Me</a> этого, что привело к полной перезагрузке страницы (и приложения Angular), в результате чего значение user наблюдаемого было сброшено на {}