Question

我有几个包含mat-autocomplete输入的组件，其中数据是从服务中提取的。

网站本身也使用@ngx-translate/core翻译成3种不同的语言。

数据库中的自动填充具有通过API调用发送的相关语言代码，因此我获得了正确的数据，因此当网站加载时，例如它将调用/api/categories/en以获取英语类别。

当用户切换语言时，如何刷新此列表？例如，如果他们切换到法语我需要触发刷新？

我的语言切换下拉列表的代码如下;

component.html;

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select Language
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" (click)="switchLanguage('pt')"><span class="flag-icon flag-icon-gr"></span> Portugese</a>
            <a class="dropdown-item" (click)="switchLanguage('en')"><span class="flag-icon flag-icon-gr"></span> English</a>
            <a class="dropdown-item" (click)="switchLanguage('fr')"><span class="flag-icon flag-icon-gr"></span> French</a>
        </div>
    </div>

component.ts是;

import { Injectable, Inject, Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
    public isCollapsed = true;
    public status = false;

    constructor(private translate: TranslateService) {

    }

    public switchLanguage(language: string) {
        this.translate.use(language);
    }
}

和app.component.ts我最初将语言设置为;

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.addLangs(["en", "pt", "fr"]);
        translate.setDefaultLang('pt');

        let browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|pt|fr/) ? browserLang : 'en');
    }

}

我的mat-automplete .ts查询代码是;

ngOnInit() {

        this.categorySubscription = this.service.getCategories().subscribe((categories: ICategory[]) => {

            this.options = categories;

            this.filteredOptions = this.searchForm.get('trade').valueChanges
                .pipe(
                startWith(''),
                map(options => options ? this.filter(options) : this.options.slice())
                );
        });

....

GetCategories服务功能的位置;

getCategories(): Observable<ICategory[]> {

        let headers = new Headers({
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': environment.apiUrl
        });

        let options = new RequestOptions({ headers: headers });

        return this.http.get(environment.apiUrl + "/api/trade/category/" + this.currentLanguage, options)
            .map(res => res.json())
            .catch(this.handleError);
    }

所以我真的需要做什么我认为会在语言发生变化并触发刷新时被检测到？有人可以建议我怎么做这个吗？

Answer 1

EventEmitter应该做到这一点。基本上，您需要订阅语言更改事件。在switchLanguage方法中，您可以调用向其订阅者发出信号的服务方法changeLanguage：

@Injectable()
export class TranslateService {
    public languageChanged: EventEmitter<any> = new EventEmitter();

    changeLanguage(language) {
        this.languageChanged.emit(language)
    }
}

您可以在要立即对更改做出反应的组件中订阅该更改，只需键入组件构造函数：

this.langSubscription= this.languageService.changeLanguage.subscribe(lang=> this.refreshAutocompleteItems(lang))

不要忘记取消订阅组件的ngOnDestroy方法

 ngOnDestroy() {
    this.langSubscription.unsubscribe()
 }

更改@ ngx-translate / core时更新mat-autocomplete

1 个答案: