使用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，然后{ {1}}将语言设置为signUpSuccess.component，de开始从服务器获取ng2-translate。如果由于任何原因现在de.json赢得比赛并首先到达客户端，那么当de.json到达客户端时，语言将切换到en。我怎么能避免这个？

Answer 1

请参阅此演示plunker：https://plnkr.co/edit/dfhdAI1o6VhVHFcnKmWH?p=preview

您可以使用此功能

switchMap()

使用此功能，前一个请求将被取消，如果它们仍处于未决状态。