代码之家 › 专栏 › 技术社区 › Sergio Mendez

如何在代码中使用Angular2转换服务管道?

angular-translate translate pipe typescript angular

-1

Sergio Mendez · 技术社区 · 7 年前

事情是这样的……我在应用程序中使用了一个Angular4模板,这是一个很好的翻译服务。问题是我不知道如何在代码中使用这个管道。

在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 回复 | 直到 7 年前

1

Sajeetharan 7 年前

你基本上 3 choices

如果您确信您的翻译文件已经加载,并且不希望在语言更改时自动更新翻译,请使用

translate.instant('id')

如果您不确定加载状态,但不需要语言更改的更新,请使用translate.get(“id”)。它给你一个可观察的,一旦它被加载就返回翻译,并终止可观察的。

如果您希望持续更新(例如,当语言更改时),请使用translate.stream(“id”)—它返回一个可观察到的并发出翻译更新。如果你不再需要它,一定要把它处理掉。

这假设您已经在组件中注入了translationservice作为translate。

例如。

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

您必须从订阅中为数据数组分配转换。