行为主体未在 .next(value) 上更新订阅者

Question

我在获取行为主题以更新 .next(value) 调用上的订阅者时遇到问题。

我是 typescript 的新手，但我想我一定是遗漏了一些小东西。从我所看到的看来是正确的。

网站上有很多这样的问题，但 none 解决了我的问题。这是一个例子。

RestService 仅放在 app.module.ts providers 数组中。

Auth Guard 文件 (services/auth-guard.service.ts)


authenticated = false;

...

    ngOnInit(){
        this.restService.isLoggedIn().subscribe({
            next: result => {
                this.authenticated = result;
            }
        });
    }

...

    canActivate(route: ActivatedRouteSnapshot): boolean{

        console.log(this.authenticated);

        if(!this.authenticated){
            this.router.navigate(['login']);
        }
        return this.authenticated;
    }
}

其余服务文件的一部分(services/rest.service.ts)

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { RequestOptions } from '@angular/http';
import { Injectable } from '@angular/core';
import { Storage } from  '@ionic/storage';
import { Observable, BehaviorSubject } from  'rxjs';
import { User } from  'src/app/Interfaces/user';
import { tap } from 'rxjs/operators';

...

authSubject  =  new  BehaviorSubject(false);

...

public _setAuthSubject(value){
    this.authSubject.next(value);
 }

public isLoggedIn() {
    return this.authSubject.asObservable();
  }

在 canActivate 中，我有一个控制台日志显示 this.authenticated 始终为 false，但是如果我调用另一个订阅者并在其下打印另一个变量，我现在可以看到它实际上是 true已正确更新。我是否遗漏了导致已验证无法更新的内容？

一些附加信息。这是我的 app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot()
  ],
  providers: [
    AuthGuardService,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    SQLite,
    SQLitePorter,
    RestService,
  ],
  bootstrap: [AppComponent]
})

还有调用auth guard服务的路由(app-routing.module.ts)

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuardService]},
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最后这里是被调用的函数，它实际上将 auth subject 设置为 true (login/login.page.ts)

constructor(
    public menu: MenuController,
    private restService: RestService,
    private router: Router,
    private storage: Storage
  ) { }


  async login(form){

    this.restService.login(form.value).subscribe({
      next: response => {
        console.log(response)
        if(response.access_token){
          this.storage.set("ACCESS_TOKEN", response.access_token);
          this.restService._setToken(response.access_token);
          this.restService._setAuthSubject(true);
        }
        this.router.navigateByUrl('');
      },
      error: err => {
        console.log('ERROR!: ', err)
      }
    });
  }

Answer 1

使用以下代码修改了 AuthGuard。服务不能在 ngOnInit 中有代码，我不知道！ Nooby 错误...感谢@ingkevin 和@lchraf 的所有帮助。

    init(){
        this.restService.isLoggedIn().subscribe({
            next: result => {
                this.authenticated = result;
            }
        });
    }

    constructor(private router: Router, 
                public restService: RestService) {
                    this.init()
                }

ngOnInit 已删除。

Answer 2

我已经在 BehaviourSubject 上创建了一个演示，请查看可能对解决您的问题有所帮助。

https://stackblitz.com/edit/behavioursubject-angular-demo

行为主体未在 .next(value) 上更新订阅者

Behavior subject not updating subscriber on .next(value)

typescript

ionic4

subscribe

behaviorsubject

auth-guard