Angular 未从服务接收角度的变量值

我在我的应用程序中开发了一个cookie检查器服务，它应该检查我的cookie同意弹出窗口的状态：

@Injectable()
export class CookieCheckService implements OnInit, OnDestroy {
  public hasConsented = false;
  private cookieStatusChangeSubscription: Subscription;

  constructor(
    private ccService: NgcCookieConsentService
  ) {
  }

  ngOnInit() {
    if (this.ccService.hasConsented()) {
      this.hasConsented = true;
    }

    console.log(this.hasConsented);

    this.cookieStatusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {
        this.hasConsented = event.status === this.ccService.getStatus().allow;
      });
  }

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

我的想法是现在从需要检查状态的任何组件调用此功能，例如，在我显示Google Maps的页脚中：

@Component({
  selector   : 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls  : ['./footer.component.css']
})
export class FooterComponent {
  hasConsented = false;

  constructor(
    private cookieCheckService: CookieCheckService
  ) {
    this.hasConsented = cookieCheckService.hasConsented;
  }
}

通常，当我按下allow now时，我想通过

ngIf

使我的谷歌地图小部件可见，但不知何故，我的服务没有任何价值——最初也是如此。我做错了什么

更新

因为有人问：

this.ccService.getStatus（）

是一个返回：

export interface NgcCookieConsentStatus {
    allow?: 'allow';
    deny?: 'deny';
    dismiss?: 'dismiss';
}

我看到两个问题

像

OnInit（）

，

OnDestroy（）

这样的生命周期挂钩是用于组件和指令的。他们不使用服务

服务中的this.hasApproved

是异步分配的。你可能必须改变这种行为。但是为了快速解决问题，您可以将所有内容移动到构造函数中

试试下面的方法

服务

@Injectable（）
导出类CookieCheckService{
公众同意=虚假；
私人cookieStatusChangeSubscription：订阅；
建造商（专用ccService:NgcCookieConsentService）{
if（this.ccService.hasApproved（））{
this.hasApproved=true；
}
console.log（this.hasApproved）；
this.cookieStatusChangeSubscription=this.ccService.statusChange$.subscribe(
（event:NgcStatusChangeEvent）=>{this.hasApproved=event.status===this.ccService.getStatus（）.allow；}
);
}
}

更新

要在组件中反映对

hasApproved

（服务）的更改，可以将其设置为RxJS。您还可以向服务的

@Injectable

装饰器提供

{providedIn:'root'}

，以确保它是（整个应用程序中的一个服务实例）

服务

从'rxjs'导入{BehaviorSubject}；
@可注射（{providedIn:'root'}）
导出类CookieCheckService{
private HasApprovedSource=新行为主体（false）；
公众获得同意{
返回此.hasApprovedSource.asObservable（）；
}
建造商（专用ccService:NgcCookieConsentService）{
if（this.ccService.hasApproved（））{
this.hasApprovedSource.next（true）；
}
console.log（this.hasApproved）；
此.ccService.statusChange$.subscribe(
（事件：NgcStatusChangeEvent）=>{
this.hasApprovedSource.next（event.status==this.ccService.getStatus（）.allow）；
}
);
}
}

然后您可以在组件中订阅它

组成部分

@Component({
  selector   : 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls  : ['./footer.component.css']
})
export class FooterComponent {
  hasConsented = false;

  constructor(private cookieCheckService: CookieCheckService) {
    this.cookieCheckService.hasConsented.subscribe(
      status => { this.hasConsented = status }
    );
  }
}

---

现在，组件中的

hasApproved

值将在每次将新值推送到服务中的

hasApproved

值时更新。

@Sajeetharan添加了一个更新来解释您的评论。您如何处理组件中的

hasApproved

显示/隐藏内容。它是否也注册更改并将其返回到组件？我是否需要以某种方式销毁ccService上的订阅？是否希望每次在服务中更改

hasApproved

值时都将其推送到组件？是的，这就是想法。我是新来的，谢谢你的理解。所以，如果我再次按下“拒绝”或“接受”，我想显示/隐藏通过ngIf检查的所有内容。我喜欢它！非常感谢你的帮助。真是太棒了！我想我不明白那个问题。但如果我能找到办法，我会发帖的。