【问题标题】：angular 2 translation json observable does not workangular 2 翻译 json observable 不起作用
【发布时间】：2017-02-23 13:56:44
【问题描述】：

有人发布了一个 plnkr 来展示如何通过服务下载 json 文件并从管道中使用它进行翻译

但它只适用于一种翻译，因为我是 Angular 新手，我发现很难理解/调试，我想问是否有人可以指出我这段代码有什么问题

https://plnkr.co/edit/VMqCvX（我可以分叉但它不保存:-()

当我添加另一个要翻译的单词和另一个翻译时，只有最后一个被翻译了

app/i18n/localizable.it.strings

{
    "home.nav.calendar": "Calendar"
    "home.nav.test": "Test"
}

app/app.component.ts

<span>{{'home.nav.calendar' | translate}}</span>
<span>{{'home.nav.test' | translate}}</span>

请帮忙

谢谢

【问题讨论】：

标签： json angular service

【解决方案1】：

我不确定你从哪里得到这个例子，但我看到那里似乎不需要的东西。有一个不需要存在的 Observable（这只会导致流中的最后一个项目被重播）。我分叉了 plunkr：

transform(value: string, args: string[]) : any {
console.log("transform", value);
// this.translationLoadedSub = this._translation.translationLoaded.subscribe((data) => {
//   console.log("transform", value);
//   this.value = this._translation.getTranslationByKey(value);
//   this._ref.markForCheck();
//   this.loaded = true;
// });

 this.loaded = true;

https://plnkr.co/edit/t3pkj02cVBHPyjTTdXop?p=preview

这个有效。

【讨论】：

【解决方案2】：

问题是 Observable 只为订阅它的最后一个值发出真值。这是因为观察者不在订阅之间共享。您可以修改观察者以在订阅之间共享自己，以便他们都知道何时加载数据，如下所示：

this.translationLoaded = Observable.create((observer) => {
    this.translationLoadedObserver = observer;
}).share();

Demo

【讨论】：