Question

我正在使用创建带有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]
});

Answer 1

首先提供翻译服务或帮助程序。
然后制作使用该服务输出数据的管道。

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

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

在Angular ts文件中翻译服务

1 个答案: