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
],

我正在将Angular 7与本机脚本一起使用。

Answer 1

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

例如：

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

该服务现在仅具有一个实例，并且可以在所有实例之间使用，并且所有模块都可以看到任何更新。另外，请确保将其从任何其他模块的providers列表中删除。

对此服务的任何服务注入也应注入root中，并且不属于MainModule的提供者。

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

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

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

1 个答案: