小编Pat*_*its的帖子

我们有一个有两种语言的 Angular 应用程序。默认为德语，另一种为英语。我们正在使用ngx-translate作为translateService.

当您刷新浏览器时，应用程序会切换回默认语言。

该switchLang()函数在我们的导航栏中被调用：

<li class="nav-item">
    <a class="nav-link" id="switchLang" (click)="switchLang()">
      <span>
        <i class="fa fa-globe" aria-hidden="true"></i>
        <span>{{'switch-lang' | translate}}</span>
      </span>
    </a>
</li>

组件.ts：

switchLang() {
    this.languageService.switchLanguage();
}

和语言服务：

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

@Injectable({ providedIn: 'root' })
export class LanguageService {

  private language = 'de';

  constructor(private translateService: TranslateService) { }

  getCurrentLanguage() {
    return this.language;
  }

  getLocale() {
    if (this.language === 'en') {
      return 'en_US';
    } else { …

我们已将应用程序从Angular 5.2 升级到 7.2，但样式变得一团糟。某些元素（例如：图标和文本）之间的间距已更改、消失或减小。

你们中有人在升级 Angular 应用程序或以下软件包后遇到过类似的问题吗？

我已经将所有可能的包恢复到其暂存版本，但这并没有解决问题。

我不知道从哪里开始排除故障以找到问题的根源。样式和 HTML 未更改。

我们更新了：

• 引导程序：从 4.1.0 到 4.3.1
• @ng-bootstrap/ng-bootstrap：从 1.1.2 到 4.0.0
• ngx-bootstrap：从 2.0.5 到 4.0.0

样式是来自angular.json的全局样式：

我们在哪里导入使用过的 Bootstrap 组件：

package.json看起来像这样：

{
  "private": true,
  "dependencies": {
    "@angular/animations": "7.2.11",
    "@angular/common": "7.2.11",
    "@angular/compiler": "7.2.11",
    "@angular/core": "7.2.11",
    "@angular/forms": "7.2.11",
    "@angular/http": "7.2.11",
    "@angular/platform-browser": "7.2.11",
    "@angular/platform-browser-dynamic": "7.2.11",
    "@angular/platform-server": "7.2.11",
    "@angular/router": "7.2.11",
    "@fortawesome/angular-fontawesome": "0.3.0",
    "@fortawesome/fontawesome-svg-core": "1.2.12",
    "@fortawesome/free-solid-svg-icons": "5.6.3",
    "@ng-bootstrap/ng-bootstrap": "4.0.0",
    "@nguniversal/express-engine": "7.1.1",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "acorn": "6.1.1",
    "angular2-image-zoom": "1.2.1",
    "bootstrap": "4.3.1", …