如何在代码中使用Angular 2 Translate service pipe？

Question

事情是这样的……我在我的应用程序中使用了一个 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.

有人知道怎么称呼它吗？

Answer 1

你基本上3 choices

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

translate.instant('ID')

如果您不确定加载状态但不需要更新语言更改，请使用 translate.get('ID')。它给你一个可观察的，returns 翻译一旦加载并终止可观察的。

如果您想要不断更新（例如，当语言发生变化时），请使用 translate.stream('ID') - 它 returns 是一个发出翻译更新的可观察对象。如果您不再需要它，请确保处置可观察对象。

这假定您已将 TranslationService 作为翻译注入到您的组件中。

例如

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

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

如何在代码中使用Angular 2 Translate service pipe？

How to use Angular 2 Translate service pipe in code?

pipe

translate

typescript

angular-translate

angular