javascript - Angular 重新加载提供者值(value)

标签 javascript angular typescript

我使用 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/

相关文章:

javascript - 'new' 表达式,其目标在 TypeScript 中缺少构造签名

javascript - 使用 JQuery 动态改变文本大小

javascript - 将过滤器选择作为对象发送以在 Angular 应用程序中返回多个值

javascript - Knockoutjs单选按钮无法选择默认选中

angular - 通过 ComponentFactoryResolver 创建组件时更改检测不起作用

javascript - 如何使用 NPM 安装 Angular 2?

Angular 2+等待方法/可观察完成

javascript - 无法转换包含异步等待的 TypeScript

javascript - CustomEvent 监听器回调触发两次?

javascript - 为什么 AJAX 不发送正确的 POST 数据?