使用ng2-translate的竞争条件

Question

我的app.component看起来像这样：

export class AppComponent {

    public constructor(public translate: TranslateService) {

        const userLang = navigator.language.split('-')[0];
        const acceptedUserLang = /(de|en)/gi.test(userLang) ? userLang : 'en';
        this.translate.setDefaultLang('en');
        this.translate.use(acceptedUserLang);
    }
}

我的app.routing有以下定义：

const appRoutes: Routes = [
    {path: 'signUpSuccess/:language', component: SignUpSuccessComponent},
];

还有我的signUpSuccess.component

export class SignUpSuccessComponent {

    public constructor(translate: TranslateService, route: ActivatedRoute) {
        translate.use(route.snapshot.params['language']);
    }
}

当我使用/signUpSuccess/de加载页面时，app.component将语言设置为en，ng2-translate开始从服务器获取en.json，然后signUpSuccess.component将语言设置为de，ng2-translate开始从服务器获取de.json。如果由于任何原因，现在de.json赢得了竞争，并且首先到达客户端，那么当en.json到达客户端时，语言将切换到en。我怎样才能避免这种情况？

Answer 1

查看这个演示插入器：https://plnkr.co/edit/dfhdAI1o6VhVHFcnKmWH?p=preview

您可以使用此函数

switchMap()

使用此功能，如果前一个请求仍处于待决状态，则会取消前一个请求。