typescript - Hur använder man Angular 2 Translate service pipe i kod?


Här är grejen... Jag använder en Angular 4-mall i min app, och den har en fungerande översättningstjänst. Problemet är att jag inte vet hur jag ska använda den pipen i koden.

I HTML, sätt bara <span>{{ this.variable | traslate }}</span> och sedan går tjänsten till några JSON-filer för att hitta texten och översätta.

Här är koden i min 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 );
  }

}

Ja, jag lade alla nödvändiga saker i modulen, eftersom det fungerar i HTML... men jag vet inte hur jag ska kalla på det i koden.

Jag letade efter hur jag skulle lösa mitt problem och jag hittade detta:

 let translatedText = new TranslatePipe().transform(msg);

 but the `TranslatePipe` does not work. 

Vet någon hur man ringer det?

Svar #1

Du har i princip 3 val

Om du är helt säker på att dina översättningsfiler redan är laddade och du inte vill uppdatera översättningarna automatiskt om ett språk ändras, använd

translate.instant('ID')

Om du inte är säker på laddningstillståndet men du inte behöver uppdateringar vid språkändringar, använd translate.get('ID'). Det ger dig en observable som returnerar översättningen när den är laddad och avslutar observablen.

Om du vill ha kontinuerliga uppdateringar (t.ex. när ett språk ändras) använd translate.stream('ID') - det returnerar en observerbar som sänder översättningsuppdateringar. Se till att avyttra den observerbara om du inte behöver den längre.

Detta förutsätter att du har injicerat TranslationService som translate i din komponent.

t.ex.

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

Du måste tilldela översättningen till din data-array inifrån subscribe