Question

我用Angular创建了一个Web应用程序。实际我的提供者有问题。

{
    provide: MY_PROVIDER_DATA,
    useValue: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'de'
},

您可以看到，我正在从localStorage设置MY_PROVIDER_DATA的值（如果存在）。如果不是，它将使用默认值'de'。如果我要更新localStorage条目的值，则MY_PROVIDER_DATA不会检测到任何更改，并且在重新加载页面之前它仍将使用第一个值。重新加载页面后，它将采用新值。是否可以在不重新加载页面的情况下更改该值？

致谢

Answer 1

使用如此简单的提供程序无法做到这一点。当提供程序的值被更新时，提供程序不会引发任何要捕获的事件。但是，如果您仍然坚持与此类提供者合作，则必须每隔x毫秒使用一个rxjs函数来对其值进行采样。因为这不是我建议您执行的操作，所以我不添加示例...

我为您提供的解决方案是将您的提供商更改为可以处理最新lang值的服务。将其注入到您的组件中，您将对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');
  }
}

角度重载提供者价值

1 个答案: