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

【问题标题】：Can I create a directive for translations instead of a pipe?我可以为翻译而不是管道创建指令吗？
【发布时间】：2018-10-20 18:47:57
【问题描述】：

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

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

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

【问题讨论】：

您也可以使用纯pipe 本身。您面临的问题是什么？在管道转换 string? 之前数据不可用
是的，就是这样。
那么异步管道怎么样？

标签： angular angular-directive angular-pipe

【解决方案1】：

你必须使用angular提供的APP_INITIALIZER， 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 },

【讨论】：