Angular 服务在其他服务中不起作用

Question

我正在使用ngx-translate 库进行翻译。在我的组件（延迟加载的路由）中，当我设置以下内容时，它工作正常：

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

我有自己的 LangService 只是为了保存用户选择的语言。我将其设置为 lang 属性并在那里使用 TranslateService：

lang:string = "fa";

constructor(public translate: TranslateService) {

    // this works
    console.log(this.lang);

    // this doesn't work
    this.translate.setDefaultLang( this.lang );
    this.translate.use( this.lang );

}

现在我只是将 LangService 注入到我的组件中，但翻译不起作用。有什么想法吗？

注意：我将 TranslateModule 导入到 SharedModule 中，并将该 SharedModule 导入到我的其他延迟加载模块中。

Answer 1

您是否将 TranslateModule 添加到 SharedModule 中的导出数组？

您的自定义 LangService 是否在 root 中提供？

这是一个例子：

1- 您的定制服务：

@Injectable({
    providedIn: 'root' 
})
export class CustomTranslateService {
       constructor(private translate: TranslateService) {}
}

2- 将 TranslateModule 添加到 SharedModule 中的导出数组。

3- 在您的组件中注入您的自定义服务：

@Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
    constructor(private translate: CustomTranslateService) {
    }

    ngOnInit(): void {
          // Use it here...
    }

}