Angular 服务属性不会在延迟加载模块中更新

Question

我有一个带有延迟加载模块的应用程序。我还有一个名为MainModule 的共享模块。这是我非常简单的服务，名为LangService：

@Injectable({
    providedIn: 'root'
}) 

export class LangService {

    lang:string = "en";

    constructor(public translate: TranslateService) {
        this.translate.setDefaultLang( this.lang );
        this.translate.use( this.lang );
    }

    setLang( lang ) {
        this.translate.setDefaultLang( this.lang );
        this.translate.use( this.lang );
        this.lang = lang;
    }
}

在我的标签路由中，我有以下内容：

changeLang(lang) {
    // lang is for example "fr"
    this.langService.setLang(lang);
}

还有我的标签页 html：

<Label [text]="'HOME.Title' | translate"></Label>

现在，当我转到另一条路线时，在它的组件中，我得到了默认值（不是更改后的值）：

constructor(public langService:LangService) {
    // prints "en" !!!
    console.log(this.langService.lang);
};

我已经在我的共享模块中提供了服务，并在任何地方导入了我的共享模块：

providers: [
    LangService
],

我正在使用带有 nativescript 的 Angular 7。

Answer 1

而不是在MainModule 中提供模块，这似乎在每次加载新模块时都会创建另一个实例。您应该在根目录下提供Injectable 服务。

例如：

@Injectable({
    providedIn: 'root'
})
export class LangService {
}

该服务现在将只有一个实例，并且可以跨平台使用，并且所有模块都可以看到任何更新。还要确保将其从任何其他模块的providers 列表中删除。

对该服务的任何服务注入，也应注入root，而不是MainModule 的提供者的一部分。

检查这个例子，我created here：app.component 中设置的语言将显示在延迟加载的客户详细信息屏幕中

除非您在其他任何地方重置语言，否则它将按原样显示。