Html 将局部变量值订阅给角度方向上另一个组件中的可观测变量

我想通过

*ngIf

基于局部变量更改HTML视图，该局部变量应基于通过共享服务的可观察对象传递的变量进行更改

HTML

同一组件的类型脚本：

导出类LoginComponent实现OnInit{
认证申请；
未验证：布尔值；
建造师(
专用authService:AuthServiceService，
专用路由器：路由器，
专用路由：ActivatedRoute）{}
getAuth（）：可观察{
返回此.authService.validation（）；
}
恩戈尼尼特（）{
this.authenticationsSubscription=this.authService.validation（）.subscribe（auth=>this.isAuthenticated=auth）；
}
} 

共享服务的类型脚本

AuthService

：

导出类AuthServiceService{
未验证：布尔值；
验证（）：可观察{
返回（此项已验证）；
}
}

在调试过程中，我发现，当AuthService的变量

isAuthenticated

发生更改时，LoginComponent中的变量

isAuthenticated

不会更改。我还尝试了使用

pipe（）

和

tap（）

，这并没有改变任何东西

---

我做错了什么？

将您的

AuthServiceService

转换为身份验证状态为

BehaviorSubject

，并将其作为

可观察对象返回，如下所述

import { Observable, BehaviorSubject } from "rxjs";

export class AuthServiceService {
  private isAuthenticatedSub: BehaviorSubject<boolean> = new BehaviorSubject(false);

  set isAuthenticated(isAuthenticated: boolean) {
    this.isAuthenticatedSub.next(isAuthenticated);
  }

  get isAuthenticated(): boolean {
    return this.isAuthenticatedSub.value;
  }

  validation(): Observable<boolean> {
    return this.isAuthenticatedSub.asObservable();
  }
}

从“rxjs”导入{Observable，BehaviorSubject}；
导出类AuthServiceService{
private isAuthenticatedSub:BehaviorSubject=新的BehaviorSubject（false）；
设置isAuthenticated（isAuthenticated:布尔值）{
this.isAuthenticatedSub.next（isAuthenticated）；
}
获取isAuthenticated（）：布尔值{
返回this.isAuthenticatedSub.value；
}
验证（）：可观察{
返回此.isAuthenticatedSub.asObservable（）；
}
}
当组件初始化时触发
OnInit
生命周期挂钩时，可观察对象的实际订阅只会发生一次

您可以订阅
BehaviorSubject
，以捕获值更改


授权服务

从'@angular/core'导入{Injectable}；
从“rxjs”导入{BehaviorSubject}；
@可注射（）
导出类身份验证服务{
已验证：行为主体；
构造函数（）{
this.isAuthenticated=新行为主体（false）；
}
}

组成部分

从'@angular/core'导入{Component，OnInit}；
从“/auth.service”导入{AuthService}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
未验证：可观察；
构造函数（私有authService:authService）{}
恩戈尼尼特（）{
this.isAuthenticated=this.authService.isAuthenticated；
}
登录（）{
this.authService.isAuthenticated.next（true）；
}
注销（）{
this.authService.isAuthenticated.next（false）；
}
}

模板


用户已通过身份验证
用户未通过身份验证
登录
注销
你能做一个堆栈闪电战吗行为主体呢？也许换成这种类型会有用吗？这不是使用特定类型的主题或不使用的问题。每次调用验证时，都会返回一个可观察对象，该对象发出一个值，然后完成验证。随着身份验证状态的改变，您需要一个随时间产生多个值的可观察对象