javascript - Observable 不会在路由器更改时加载数据

Question

使用 Angular (v7.2) 和 Firebase Auth 构建一个带有成员区域的简单 Web 应用程序。我已将仪表板设置在具有自己路由器的单独模块中。我有一项服务可以完成所有组件之间共享的身份验证的大部分繁重工作。

我不相信这是最好的做事方式，但我的 auth.service.ts 文件如下所示：

export class AuthService {
   private userData$ = new Subject();
   private userData;
   public userDataObs = this.userData$.asObservable();

   constructor(public afs: AngularFirestore, public afAuth: AngularFireAuth, public functions: AngularFireFunctions, public router: Router, public ngZone: NgZone) {
     this.afAuth.authState.subscribe((user) => {
       if(user) {
         this.userData = user;

         this.getCurrentUserAccessLevel().subscribe((result) => {
           let userAccessLevel = result.result;
           let userObj = {
             displayName: this.userData.displayName,
             email: this.userData.email,
             emailVerified: this.userData.emailVerified,
             phoneNumber: this.userData.phoneNumber,
             photoURL: this.userData.photoURL,
             uid: this.userData.uid,
             accessLevel: userAccessLevel
           }

           this.userData$.next(userObj);
         });

         localStorage.setItem('user', JSON.stringify(this.userData));
         JSON.parse(localStorage.getItem('user'));
       } else {
         localStorage.setItem('user', null);
         JSON.parse(localStorage.getItem('user'));
       }
     })
   }
...

简而言之，该服务从 Firebase 身份验证服务获取用户数据并将其存储到 userData 属性中。然后它获取 accessLevel，这是 Firebase 身份验证中的自定义声明，并将其与 userData 中的某些字段合并以创建自定义 userObj 对象。然后将 userObj 提交给存在可观察 userDataObs 的 userData$ 主题​​。

每个组件都订阅 userDataObs。

在主要的dashboard.component.ts 中有：

export class DashboardComponent {

  private userDataObs;
  private userData;
  private loaded: boolean = false;

  constructor(public authService: AuthService, public router: Router, public ngZone: NgZone) {
    this.authService.userDataObs.subscribe((data) => {
      this.userData = data;
      this.loaded = true;
    })
  }

}

它只是订阅 authService 中的 userDataObs。在主仪表板组件中有一个菜单，其中包含各种路由器链接到其他组件，这些组件通过组件中的路由器插座提供服务。如果我单击指向另一个组件的链接，则路由会更改并且组件会初始化，但 observable 不会加载。没有错误消息或任何东西 - 什么都没有：

仪表板-profile.component.ts：

export class DashboardProfileComponent {

  private userDataObs;
  private userData;
  private loaded: boolean = false;
  private fileUploadEvent;
  private fileUploadProgress;
  private fileUploadURL;

  constructor(private authService: AuthService, private router: Router, private uploadService: UploadService) {
    console.log('constructor');
    this.authService.userDataObs.subscribe((data) => {
      this.userData = data;
      this.loaded = true;
      console.log('loaded');
    });
  }

但是，如果我只是导航到该路线，而不单击 routerLink 它工作正常。

我认为这与共享可观察对象有关？理想情况下，我希望子组件以某种方式从dashboard.component 继承可观察对象，但据我所知这是不可能的，因此我需要设置一个新订阅。

将不胜感激任何帮助！谢谢！

标签： javascriptangulartypescriptobservable