时间戳

首页 > 解决方案 > 我可以为翻译而不是管道创建指令吗？

angular - 我可以为翻译而不是管道创建指令吗？

问题描述

我正在创建一个翻译模块，翻译使用 PouchDB 存储在本地。而且我们有 2 个后备而不是只有一个，这使得最流行的翻译插件不兼容。

问题在于将管道设置为pure: false会导致性能问题，但我找不到任何方法来强制管道在需要时工作而不是运行 onchange。

那么有没有办法通过指令来代替呢？

标签： angularangular-directiveangular-pipe

解决方案

您必须使用APP_INITIALIZERAngular 提供的 APP_INITIALIZER 注入令牌是您参与 Angular 应用程序初始化过程以完成自己的工作的一种方式。

创建AppConfigService从数据库加载翻译内容的内容。

@Injectable()
export class AppConfigService {

    constructor(private translateService: TranslateService) {
    }

    public load() {
        return new Promise((resolve, reject) => {
          // TranslateService.getLocaleProperties => You can make use to load transaltion stuffs. This returns Observable.
            this.translateService.getLocaleProperties().subscribe(
                (response) => {
                    resolve(true);
                },
                (error) => {
                    console.error("The localization resources are not loaded.");
                    resolve(true);
                });
        });
    }
}

在app.module.ts，你做这些改变，

创建configLoad工厂，该工厂具有调用加载方法的功能AppConfigService。

export function configLoad(config: AppConfigService) { return () => config.load(); }

在providers: []数组中提供APP_INITIALIZER

{ provide: APP_INITIALIZER, useFactory: configLoad, deps: [AppConfigService], multi: true },

推荐阅读