在 Angular ts 文件中翻译服务答案

【问题标题】：Translate service in Angular ts file在 Angular ts 文件中翻译服务
【发布时间】：2019-03-04 11:08:19
【问题描述】：

我正在使用带有 html 代码的工作文件创建的角度管道和服务。但是当我将它与 TS 文件一起使用时，它们不起作用。

翻译服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TranslateServices {
  data: any = {};

  constructor(private http: HttpClient) {
  }

  async use(lang: string): Promise<{}> {
    return await new Promise<{}>((resolve, reject) => {
      const langPath = `assets/i18n/${lang || 'en'}.json`;
      this.http.get<{}>(langPath).subscribe(
        translation => {
          this.data = Object.assign({}, translation || {});
          resolve(this.data);
        },
        error => {
          this.data = {};
          resolve(this.data);
        }
      );
    });
  }
}

翻译管道

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateServices } from '../../../shared/services';
    @Pipe({ name: 'translate', pure: false })
    export class TranslatePipe implements PipeTransform {
      constructor(private translate: TranslateServices) { }
      transform(key): any {
        // console.log('this.translate.data[key]', this.translate.data[key]);
        return this.translate.data[key] || key;
      }
    }

这在 html 中可以正常工作

<input type="text"  placeholder="{{ 'lbl.SearchByCodeOrStatus' | translate }}" class="form-control border-0">

但是当我使用这个时，我都坏了

import { TranslateService } from '@ngx-translate/core';
this.translate.get([menuItem.title]).subscribe(translations => {
   menuItem.title: translations[menuItem.title]
});

【问题讨论】：

您提供了一个TranslateServices 课程，但随后问题与另一个课程TranslateService 相关。此外，举例说明您的问题的小 sn-p 是不完整的。请扩大您的问题

标签： javascript angular internationalization

【解决方案1】：

先做一个翻译服务或助手。
然后制作使用该服务输出数据的管道。

要在模板文件中使用翻译器，请使用管道函数。要在 ts 文件中使用它，请使用 service 或 helper 函数。

pipe 的目的不是在 ts 文件中使用。

【讨论】：

我发现我只能在 html 中使用管道，仅用于该用途。但既然我做了服务，我应该能够得到预期的输出。但我无法得到它......我已经提到了我在顶部所做的服务