如何在代码中使用 Angular 2 Translate 服务管道？答案

【问题标题】：How to use Angular 2 Translate service pipe in code?如何在代码中使用 Angular 2 Translate 服务管道？
【发布时间】：2019-01-14 22:12:02
【问题描述】：

事情是这样的……我在我的应用程序中使用了一个 angular 4 模板，它有一个很好的翻译服务。问题是我不知道如何在代码中使用该管道。

在 HTML 中只需输入 <span>{{ this.variable | traslate }}</span> 然后，该服务会转到一些 JSON 文件以查找文本并进行翻译。

这是我的component.ts中的代码

const SMALL_WIDTH_BREAKPOINT = 960;
@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})

export class TrackingComponent implements OnInit { 
  currentLang = 'es';
  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 
  ${SMALL_WIDTH_BREAKPOINT}px)`);
  constructor(
    public translate: TranslateService,
    zone: NgZone,
    private router: Router,
  ) {
    const browserLang: string = translate.getBrowserLang();
      translate.use(browserLang.match(/en|es/) ? browserLang : 'es');
      this.mediaMatcher.addListener(mql => zone.run(() => {
        this.mediaMatcher = mql;
      }));
      translate.use(this.currentLang);
  }

  ngOnInit() { }

  myFunction(msg: string) : {
    const translatedText = msg; // HERE IS WHERE I WANT TO USE THE TRANSLATE SERVICE BUT I DON'T KNOW HOW TO CALL IT
    alert(translatedText );
  }

}

是的，我把所有需要的东西都放在了模块中，因为它在 HTML 中工作……但我不知道如何在代码中调用它。

我正在寻找如何解决我的问题，我发现了这个：

 let translatedText = new TranslatePipe().transform(msg);

 but the `TranslatePipe` does not work.

有人知道怎么称呼吗？

【问题讨论】：

您的：{{ this.variable | 中存在拼写错误翻译 }}

标签： angular typescript pipe translate angular-translate

【解决方案1】：

你基本上有3 choices

如果您绝对确定您的翻译文件已经加载，并且您不想在语言更改时自动更新翻译，请使用

translate.instant('ID')

如果您不确定加载状态，但不需要更新语言更改，请使用 translate.get('ID')。它为您提供了一个 observable，它在加载并终止 observable 后返回翻译。

如果您想要不断更新（例如，当语言发生变化时），请使用 translate.stream('ID') - 它返回一个发出翻译更新的 observable。如果您不再需要它，请确保将 observable 丢弃。

这假设您已在组件中注入 TranslationService 作为翻译。

例如

export class AppComponent {
    constructor(translate: TranslateService) {
        translate.get('hello.world').subscribe((text:string) => {console.log(text});
    }
}

您必须在订阅中将翻译分配给您的数据数组

【讨论】：