我使用 Angular 创建了一个 Web 应用程序。实际上我的 vendor 有问题。
{
provide: MY_PROVIDER_DATA,
useValue: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'de'
},
如您所见,我正在从我的 localStorage 中设置 MY_PROVIDER_DATA 的值(如果它存在)。如果不是,它将使用默认值“de”。如果我正在更新 localStorage-entry 的值,我的 MY_PROVIDER_DATA 不会检测到任何更改,并且在我重新加载页面之前它仍然使用第一个值。页面重新加载后,它采用新值。是否可以在不重新加载页面的情况下更改该值?
问候
最佳答案
这不能用这么简单的提供者来完成。当它的值更新时,提供者不会引发事件供您捕获。但是,如果您仍然坚持使用这样的提供程序,则必须使用 rxjs
函数每隔 x
毫秒对其值进行一次采样。因为这不是我建议你做的,所以我不添加这样的例子......
我的解决方案是将您的提供者更改为能够处理最新的 lang
值的服务。将它注入(inject)您的组件,您将更改 lang
变量。
这是一个DEMO使用下面的示例代码:
shared.service.ts:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SharedService {
langChanged = new Subject<string>();
lang = localStorage.getItem('lang') || 'de';
constructor() {
this.langChanged.subscribe(lang => {
this.lang = lang;
localStorage.setItem('lang', lang);
});
}
}
some.component.ts:
export class SomeComponent implements OnInit, OnDestroy {
sub: Subscription;
lang: string;
constructor(private sharedService: SharedService) {
this.lang = sharedService.lang;
}
ngOnInit() {
this.sub = this.sharedService.langChanged.subscribe(lang => {
this.lang = lang;
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
onChangeLang(): void {
this.sharedService.langChanged.next('en');
}
}
关于javascript - Angular 重新加载提供者值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59635000/