ngx-translate with angular material 2 MdSnackBar

Question

我是 TS 和 Angular 4 的新手。我需要能够向用户显示 angular material 2 MdSnackBar 中翻译的 CLOSE 单词。我了解到您可以从代码中调用 ngx-translate 翻译服务，如下所示：

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

问题是我需要能够在名为 MdSnackBar.

的 angular material 2 元素中显示它

我想这样执行：

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

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

但我不知道如何使 getCloseWord() 方法从 observable 中 return 成为正确的字符串值。

Answer 1

尝试如下：

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

“.get()”函数 returns 是一个 Observable，所以只要在 "get" 订阅时打开你的 snackbar。然后你知道你的翻译是可用的。

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

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 });
      });
}

ngx-translate with angular material 2 MdSnackBar

ngx-translate with angular material 2 MdSnackBar

rxjs

typescript

angular-material2

angular