代码之家 › 专栏 › 技术社区 › Gargoyle

行为主体不发出值

behaviorsubject rxjs6 angular7 angular

Gargoyle · 技术社区 · 6 年前

在我的Angular 7应用程序中,我有一个登录服务,它可以跟踪用户是否登录以及管理员。只有首字母 true 价值来自 login

private admin = new BehaviorSubject(false);
admin$ = this.admin.asObservable();

login(user: string, pwd: string): Observable<ILoginData> {
    sessionStorage.removeItem('admin');

    const coded = btoa(`${user}:${pwd}`);
    const headers = new HttpHeaders({
        'Authorization': `Basic ${coded}`,
    });

    return this.http
        .post<ILoginData>(`${this.baseUrl}/login`, null, {headers: headers})
        .pipe(
            tap(x => {
                sessionStorage.setItem('admin', JSON.stringify(x.admin));

                this.admin.next(x.admin);
            })
        )
}

logout(): void {
    sessionStorage.removeItem('admin');
    this.admin.next(false);
}

然后是 app.component.ts 同意:

private subscription: Subscription;

ngOnInit(): void {
    this.subscription = this.producerService.admin$.subscribe(x => {
        console.info(`Admin being set to ${x}`);
        this.showAdminSection = x;
    });
}

ngOnDestroy(): void {
    if (this.subscription) {
        this.subscription.unsubscribe();
    }
}

logout() 方法,即使我正在发送 false 更新时,消息永远不会打印到控制台,说它正在被设置为 假 . 就像只发出第一个值,然后订阅由于某种原因而关闭。

我不知道为什么 假

1 回复 | 直到 6 年前

shhdharmen 6 年前

这不一定是真的 ngOnDestroy 在从observable获取最新值之前调用。

这取决于执行操作所需的逻辑或时间。就你而言, logout 恩戈德斯特罗

例如,考虑下面的代码 stackblitz . 如果你看到 测试服务.ts 文件中,我创建了两个函数,如下所示:

...
  nextValueDelayed(value: boolean) {
    setTimeout(() => {
      this._test.next(value);
    });
  }

  nextValue(value: boolean) {
    this._test.next(value);
  }
...

现在,从 应用组件.ts ,我的电话如下:

...
  reverse() {
    this.visible = !this.visible;
    this._testService.nextValue(this.visible);
  }

  reverseDelayed() {
    this.visible = !this.visible;
    this._testService.nextValueDelayed(this.visible);
  }
...

这两个函数都是从按钮和 visible 负责制造和破坏 HelloComponent . 应用程序组件.html

<hello name="{{ name }}" *ngIf="visible"></hello>
<button (click)="reverse()">Reverse</button>
<button (click)="reverseDelayed()">Reverse Delayed</button>

现在, 订阅和安慰价值,取消订阅,如下所示:

...
ngOnInit(){
    this.sub = this._testService.test$.subscribe(value=>{
      console.log(value);
    })
  }

  ngOnDestroy(){
    this.sub.unsubscribe();
  }
...

现在,试着点击 Reverse 和 Reverse Delayed 按钮,当你点击 ,它将打印所有值。但是,当你点击 ,组件将在获取最新值之前被销毁,因为我们使用了 setTimeout 增加一些延迟。