未从 Angular 中的服务接收变量值

Question

我在我的应用程序中开发了一个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 地图的页脚中：

@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;
}
}

通常，当我现在按允许时，我想通过ngIf使我的Google地图小部件可见，但不知何故，我没有从我的服务中获得任何价值 - 最初也是如此。我在这里做错了什么？

更新

因为有人问：this.ccService.getStatus()是一个返回的接口：

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

Answer 1

我看到两个问题

1. 生命周期钩子，如OnInit()、OnDestroy()用于组件和指令。它们不与服务一起使用。

2. 服务中的this.hasConsented是异步分配的。您可能需要更改行为。但是为了快速解决问题，您可以将所有内容移动到构造函数中。

尝试以下操作

服务

@Injectable()
export class CookieCheckService {
public hasConsented = false;
private cookieStatusChangeSubscription: Subscription;
constructor(private ccService: NgcCookieConsentService) {
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; }
);
}
}

更新

为了反映组件中对hasConsented(服务(的更改，您可以将其设为 RxJSBehaviorSubject。此外，还可以向服务的@Injectable装饰器提供{ providedIn: 'root' }，以确保它是单一实例(整个应用中服务的一个实例(。

服务

import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class CookieCheckService {
private hasConsentedSource = new BehaviorSubject<boolean>(false);
public get hasConsented() {
return this.hasConsentedSource.asObservable();
}
constructor(private ccService: NgcCookieConsentService) {
if (this.ccService.hasConsented()) {
this.hasConsentedSource.next(true);
}
console.log(this.hasConsented);
this.ccService.statusChange$.subscribe(
(event: NgcStatusChangeEvent) => { 
this.hasConsentedSource.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 }
);
}
}

现在，每次将新值推送到服务中的hasConsented值时，组件中的hasConsented值都会更新。