Question

我有一个组件，可以在其中使用路由参数切换“标签”。我订阅了route参数，因此，每当在选项卡之间切换时，我都会调用该选项卡的功能。其中一项功能是：

getUserFeed() {
console.log('testUser');
this.currentTab = "2";
this.loading = true;

this.authService.userData$.subscribe(data => {
  this.user = data;

  this.userAsteroid$ = this.userAsteroidService.getAsteroids();
  this.userAsteroid$.subscribe(asteroids => {
    this.asteroidIds = [];

    asteroids.forEach(document => {
      if (document.userId == this.user.uid) {
        this.asteroidIds.push(document.asteroidId);
      }
    });

    this.asteroidIds.forEach(asteroidObservable => {
      console.log("test:", asteroidObservable);
      var data$;
      data$ = this.neoService.getLookup$(asteroidObservable);

      data$.subscribe(asteroid => {
        this.dataArray.push(asteroid);
      });
    });

    this.loading = false;
    console.log("data & asteroids", this.dataArray, this.asteroidIds);
  });
});

该函数在我第一次调用时可以正常工作，但是当我第二次调用它时，订阅this.authService.userData$.subscribe(data => {}中的所有内容都不会发生。甚至没有带字符串的控制台日志也无法执行任何操作。

此外，当我在浏览器中重新加载页面时，this.authService.userData$.subscribe(data => {}中的所有内容都会发生两次。

有人知道是什么原因吗？

编辑

最初，我说该函数在同一组件中第二次调用时不起作用，但是我意识到从站点中的任何地方第二次调用该函数都不起作用。为了使其正常工作，我必须重新加载我的网站。

我正在使用Firebase身份验证系统。我的身份验证服务：

userData$: BehaviorSubject<User> = new BehaviorSubject(null);

constructor(private afAuth: AngularFireAuth) {
  this.afAuth.authState.subscribe((user) => {
     this.setUserData(user);
  });
 }

private setUserData(user) {
if (user !== null) {
  this.userData$.next({
    uid: user.uid,
    displayName: user.displayName || user.email,
    photoURL: user.photoURL || '/assets/icons/icon-72x72.png',
    email: user.email,
  });
} else {
  this.userData$.next(null);
}

Answer 1

感谢评论者的帮助。

首先，为了避免两次获取数据，我不得不将大部分代码放在userData $订阅之外。然后，我必须将我的getUserFeed（）放在ngOnInit（）中，以便每次更改选项卡时都不会调用它。当我再次访问该页面并再次调用该函数时，我还必须退订userAsteroid $。

现在看起来像这样

ngOnInit() {
this.authService.userData$.subscribe(data => {
  this.user = data;
});
this.getUserFeed();}

this.getUserFeed(){
   this.userAsteroid$ = this.userAsteroidService.getAsteroids();
   this.astroSub = this.userAsteroid$.subscribe(asteroids => {
   this.asteroidIds = [];

   asteroids.forEach(document => {
      if (document.userId == this.user.uid) {
         this.asteroidIds.push(document.asteroidId);
      }
   });

   this.asteroidIds.forEach(asteroidObservable => {
      console.log("test:", asteroidObservable);
      var data$;
      data$ = this.neoService.getLookup$(asteroidObservable);

      data$.subscribe(asteroid => {
        this.dataUserArray.push(asteroid);
      });
   });

   this.loading = false;

   this.astroSub.unsubscribe();
   console.log("data & asteroids", this.dataUserArray, this.asteroidIds);
});}

角度（Angular）：在调用函数时订阅不起作用

1 个答案: