如何使用 ngx-translate 从子级向父级发出事件答案

【问题标题】：How to emit event from child to parent using ngx-translate如何使用 ngx-translate 从子级向父级发出事件
【发布时间】：2018-10-05 05:30:51
【问题描述】：

我使用 ngx-translate 制作一个多语言的 Angular 网页。我将 JSON 文件用于语言并将它们放在 assets / i18n / en.json （用于英语）和 assets / i18n / ge.json 用于德语。我实现了从子到父的 EventEmit 事件如下：

child.component.ts ：

private translateService: TranslateService;
@Output() showLanguage = new EventEmitter();

constructor(translateService: TranslateService) {
    this.translateService = translateService;
    this.translateService.setDefaultLang('en');
  }



 switchLanguage(language: string) {
    this.showLanguage.emit(this.translateService.use(language));
  }

Child.html

  <button (click)="switchLanguage('en')">en</button>
  <button (click)="switchLanguage('fr')">fr</button>

parent.component.ts

private translateService: TranslateService;
 constructor(translateService: TranslateService) {
    this.translateService = translateService;
  }
switchLanguage(language) {
    this.translateService.use(this.language);
 }

Parent.html

  <child-page (showLanguage)="switchLanguage($event)"><child-page>

App.module.ts

 export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
  }

  @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

但是当我点击按钮时，我会报错：

ERROR TypeError: Object(...) is not a function
    at TranslateService.use (ngx-translate-core.js:555)
    at ChildComponent.switchLanguage (childcomponent.component.ts:40)
    at Object.eval [as handleEvent] (ChildComponent.html:12)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:460)

请帮助我。谢谢

【问题讨论】：

父组件至少应该是this.translateService.use(language);（我假设）而不是this.translateService.use(this.language);
我看不出这一切的意义所在。你想达到什么目的？每次更改孩子的语言时，再次更改父母的语言有什么意义？
@JB Nizet 因为我的子组件是导航栏，父组件是概览页面。我目前正在将按钮放在导航栏上。
好吧，正如我已经说过的，您只需从任何您想要的地方更改语言一次。该服务是单例的，一旦您在服务中设置了语言，它就会在全局范围内为所有组件设置。
您可能使用的 ngx-translate 版本与您正在使用的 Angular 版本不兼容。检查你的依赖关系。

标签： angular angular-directive

【解决方案1】：

代替

switchLanguage(language: string) {
this.showLanguage.emit(this.translateService.use(language));
}

尝试只发出语言

switchLanguage(language: string) {
this.showLanguage.emit(language);
}

【讨论】：

感谢您的帮助。但正如@JB Nizet 所说。我们不需要从孩子到父母的 EmitEvent，因为语言服务是全球性的。只需设置在孩子中。