Question

我是TS和Angular 4的新手。我需要能够在角度材料2 CLOSE内向用户显示翻译的MdSnackBar字词。我知道您可以在代码中调用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 });
  });
  ...
}

＆＃34; .get（）＆＃34;函数返回一个Observable，这样只需打开你的零食吧即可获得＆＃34; get＆＃34;订阅。然后你知道你的翻译是可用的。

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

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

1 个答案: