Question

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

我不认为这是最好的处理方式，但是我的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。在主仪表板组件中，有一个菜单，其中包含各种指向其他组件的routerLink，这些链接可通过组件中的路由器插座来提供。如果我单击到另一个组件的链接，则路由会更改，并且该组件会初始化，但不会加载可观察对象。没有错误消息或其他任何内容-完全没有：

dashboard-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继承可观察对象，但是从我可以告诉的观点来看这是不可能的，因此我需要设置新的订阅。

将不胜感激！谢谢！

“ Observable”不会在路由器更改时加载数据

0 个答案: