带有 ngx-translate 的自定义 Angular 库

Question

我创建了自己的私人角度库，其中包含多个组件，让我的生活更轻松。我按照本教程制作了这个库。一切都很好，我什至将它添加到另一个项目中进行测试。

现在是我必须支持多种语言的部分，因为我住在比利时。我过去使用过 ngx-translate 包没有任何问题，所以我认为这很容易。

我在我的项目中添加了一个带有翻译 json 的 assets/i18n 文件夹。

我发现 angular cli 不包含构建时的资产，因此您必须在制作包之前手动或使用 gulp 将它们添加到 dist 文件夹中。这样做之后，我注意到标签没有被翻译，除非我将翻译包含在主应用程序的 json 文件中。

我的库中的每个组件都有自己的模块，所以我认为我只需要在这些模块中添加翻译模块。所以我做了以下事情。

export function httpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        DirectivesModule,
        ButtonModule,
        IconModule,
        PillModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: (httpLoaderFactory),
                deps: [HttpClient]
            },
            isolate: true
        })
    ],
    declarations: [
        FilterComponent
    ],
    exports: [
        FilterComponent
    ]
})

这让事情变得更糟，不仅标签仍未被翻译，我的主要应用程序甚至没有使用自己的翻译。在库模块中的这些更改之前，主应用程序的翻译没有问题......

所以是的，你猜对了，我被卡住了......我似乎找不到正确的解决方案。

Answer 1

因为我也无济于事我尝试了另一种方法，因为在此描述的职位。所以我将我的 json 文件转换为 ts 文件，返回一个 json 对象。然后我创建了我自己的 translateService ，它将翻译添加到现有翻译（由主应用程序的 json 文件添加的那些）之上，如帖子中所述。

这有效但否决了以前的翻译，甚至加载得太晚了。这导致应用程序只显示翻译键而不是翻译。因此，我没有像在帖子中那样初始化翻译，而是先使用订阅来等待主要翻译。

//Library
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { en } from "../localization/en";
import { nl } from "../localization/nl";

@Injectable()
export class TranslateUiService {
    private availableLanguages = { en, nl };

    constructor(private translateService: TranslateService) {
    }

    public init(language: string = null): any {
        if (language) {
            //initialize one specific language
            this.translateService.setTranslation(language, this.availableLanguages[language], true);
        } else {
            //initialize all
            Object.keys(this.availableLanguages).forEach((language) => {
                this.translateService.setTranslation(language, this.availableLanguages[language], true);
            });
        }
    }
}

//App
constructor(private translateUiService: TranslateUiService, private translateService: TranslateService) {
        this.translateService.setDefaultLang('en');
        this.translateService.use('en').subscribe(() => {
            this.translateUiService.init('en');
        });
    }