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

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

有人知道怎么称呼它吗？

答案＃1

你基本上有3个选择

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

translate.instant('ID')

如果你不确定加载状态，但不需要语言更改的更新，可以使用 translate.get('ID')。它会给你一个在加载完成后返回翻译并终止 observable 的可观察对象。

如果你想要持续更新（例如，当语言发生变化时），请使用 translate.stream('ID') - 它会返回一个发出翻译更新的可观察对象。如果不再需要，请确保处理该可观察对象。

这假设你已经在你的组件中将 TranslationService 注入为 translate。

例如

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

你必须在订阅内部将翻译分配给你的数据数组