ngx-translate 与角材料 2 MdSnackBar

Question

我是 TS 和 Angular 4 的新手。我需要能够在 Angular 材料 2 MdSnackBar 内向用户显示翻译后的 CLOSE 单词。我了解到您可以像这样在代码中调用 ngx-translate 翻译服务：

this.translate.get('ERROR.CLOSE').subscribe((res: string) => {
     console.log(res);
});

问题是我需要能够在名为 MdSnackBar 的有角材料 2 元素中显示这一点。

我想这样执行它：

this.snackBar.open(error, this.getCloseWord(), {
     duration: 10000,
})

private getCloseWord() {
    this.translate.get('ERROR.CLOSE').subscribe((res: string) => {
      console.log(res);
    });
  }

但我不知道如何使getCloseWord() 方法从可观察对象中返回正确的字符串值。

Answer 1

尝试如下：

public someMethod() {
  const error = ...some error...;
  ...
  this.translate.get('ERROR.CLOSE').subscribe(( res: string ) => {
    this.snackBar.open(error, res, { duration: 10000 });
  });
  ...
}

“.get()”函数返回一个 Observable，所以当“get”被订阅时打开你的快餐栏。然后你就知道你的翻译是可用的。

---

具有多个观察者的解决方案可能如下：

public someMethod() {
    const newObserver = new ReplaySubject();
    let error = null;
    let close = null;

    this.translate.get('ERROR.MESSAGE').subscribe( (translation: string) => {
        error = translation;
        newObserver.next();
    });

    this.translate.get('ERROR.CLOSE').subscribe( (translation: string) => {
        close = translation;
        newObserver.next();
    });

    newObserver.subscribe( () => {
        if(error && close) {
            this.snackBar.open(error, close, { duration: 10000 });
        }
    });
}

或者最好的解决方案是合并它们：

import "rxjs/add/observable/forkJoin";
...
public someMethod(){
   const firstTranslationObs = this.translate.get('ERROR.MESSAGE');
   const secondTranslationObs = this.translate.get('ERROR.CLOSE');

   Observable.forkJoin([firstTranslationObs, secondTranslationObs])
      .subscribe(results => {
        let error= results[0];
        let close = results[1];
        this.snackBar.open(error, close, { duration: 10000 });
      });
}