Angular 角度可观测返回空

所以我在这方面已经有一段时间了，我不明白为什么我总是得到一个空的可观测值

服务：

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

---

因此，主组件在auth服务中“设置”用户，并有一个链接到主题页面组件的按钮。但是，一旦我单击主页上的按钮并路由到主题页组件，主题页组件中的console.log将只返回一个空对象{}，就好像从未设置过用户一样。Stackblitz问题示例

我发现在我的模板文件中，我实际上使用的是标准的

而不是

单击我

，这导致页面（和Angular app）完全重新加载，导致

用户

可观察值重置为

{}

谁负责向您的

家庭组件提供
用户名
？我认为
ngOnInit
是潜在的问题源，因为您没有订阅URL参数（您使用快照），所以如果URL中的用户名在init之后更改，您将不会更新它。如果HomeComponent在登录之前已初始化，则它将为空，因此您将获得空对象。请尝试
订阅
，而不是使用
快照
，并查看这是否有助于解决您的问题。这里有一个关于这个问题的解释：嗨，马克，我试了你的建议。但是，用户不会在整个应用程序中更改，而是设置一次并保持不变。
主页组件
没有多个路由。我为我的问题创建了一个stackblitz示例，并编辑了我的原始帖子。
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);
    }); 
  }
}