Question

我有一个我去路的组件，所以它没有父/子。我通过TranslateService更改语言，这是从我的app.component调用的，这是我的应用程序的基础。我调用服务从后端获取HTML文件，但是当我更改语言时，我想进行一个新的调用以使用另一种语言获取文档。

我无法使用ngOnchanges，因为没有@Input()我无法更改后端，因为它来自其他应用程序使用的旧应用程序。

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {
    constructor(private translateService: TranslateService) {
    }

    public changeLanguage(language) {
        this.translateService.use(language);
        this.translateService.setDefaultLang(language);
    }
}

声明

@Component({
    selector: 'app-disclaimer',
    templateUrl: 'vastgeklikteRechten.component.html',
    styleUrls: ['vastgeklikteRechten.component.scss']
})

export class VastgeklikteRechtenComponent {
    @ViewChild('dataContainer') dataContainer: ElementRef;

    text = '';

    constructor(
        private translateService: TranslateService,
        private vastgeklikteRechtenService: VastgeklikteRechtenService
    ) {
        this.vastgeklikteRechtenService.getVastgeklikteRechten(
        this.getLanguage()).subscribe(text => {
            this.text = text;
            this.loadData(text);
        });
    }

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }

    getLanguage() {
        return this.translateService.getDefaultLang();
    }
}

Answer 1

在我的免责声明中更改了我的构造函数。我仍然需要原始调用从我的服务获取html文件，这是构造函数：

constructor(private location: Location,
          private translateService: TranslateService,
          private vastgeklikteRechtenService: VastgeklikteRechtenService) {
this.vastgeklikteRechtenService.getVastgeklikteRechten(this.getLanguage()).subscribe(text => {
  this.text = text;
  this.loadData(text);
});
this.onLanguageChanged();
}

我添加了一个名为onLanguageChanged（）的方法，我订阅了我在TranslationService中找到的eventEmitter。所以现在当'onLangChange'事件发生时，我会做一个新的电话。

onLanguageChanged() {
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
  this.vastgeklikteRechtenService.getVastgeklikteRechten(
    event.lang).subscribe(text => {
    this.text = text;
    this.loadData(text);
  });
});
}

语言更改时进行新的服务调用

1 个答案: