Angular: использовать язык перевода по умолчанию в полном приложении

Question

Я использую пакет ngx-translation для интернационализации своего приложения angular, и я хочу установить выбранный язык пользователем в интерфейсе аутентификации как язык по умолчанию для всех приложений, раскрывающийся список языков помещается в логин На странице и в панели навигации проблема заключается в том, что пользователь меняет язык по умолчанию, который является французским на другой язык, и входит в язык, возвращающийся к языку по умолчанию !!

navbar.ts:

import { Component, OnInit, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
// import { Socket } from 'ngx-socket-io';
import { SocketIOService } from '../../socket-io.service'
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';

import * as $ from 'jquery';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

export class NavbarComponent implements OnInit, AfterViewInit {

  viewChecked: any = false;
  user: any;
  notifications: any[];

  avatarDropeddown: any = false;
  notifDropeddown: any = false;
  textDir: string = 'ltr';
  lng: string

  constructor(
    public translate: TranslateService,
    private router: Router,
    private http: HttpClient,
    // private socket: Socket
    private socketService: SocketIOService
  ) {
    translate.setDefaultLang('fr');
    translate.use('fr');

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      if (event.lang == 'ar') {
        this.textDir = 'rtl';
      }
      else {
        this.textDir = 'ltr';
      }
    });
  }

  ngOnInit() {

    this.user = JSON.parse(localStorage.getItem('currentUser'));
    this.http.get('api/notifications/byUser/' + this.user._id).subscribe((notifications: any) => {
      this.notifications = notifications
    });

    this.socketService.onNewNotif().subscribe(msg => {
      this.http.get('api/notifications/byUser/' + this.user._id).subscribe((notifications: any) => {
        this.notifications = notifications
      });
    });

  }
  changeLang(val) {
    this.translate.use(val)
  }

  logout() {
    this.http.post('api/auth/signout', {}).subscribe(res => {
      this.avatarDropeddown = false;
      localStorage.removeItem('currentUser');
      this.router.navigateByUrl('/auth');
    });
  }

  ngAfterViewInit() {
    let that = this;
    $(document).click(function(e) {
      if ($(e.target).closest("#avatarButton").length > 0) {
        return false;
      }
      if ($(e.target).closest("#dropdownContent").length > 0) {
        return false;
      }

      if ($(e.target).closest("#notifications").length > 0) {
        return false;
      }
      if ($(e.target).closest("#notificationDropdownContent").length > 0) {
        return false;
      }
      if (that.avatarDropeddown == true) {
        that.avatarDropdown();
      }
      if (that.notifDropeddown == true) {
        that.notificationDropdown();
      }
    });
  }
}

*** auth.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { AuthService } from '../auth.service';
import * as $ from 'jquery';
import { Router } from '@angular/router';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';


@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
  public loading: boolean;
  user: FormGroup;

  currentLanguage: string

  constructor(public translate: TranslateService, private http: HttpClient, private authservice: AuthService, private router: Router, private toastr: ToastrService) {
    translate.setDefaultLang('fr');
    translate.use('fr');
    this.user = new FormGroup({
      phone: new FormControl('', [Validators.required]),
      password: new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(30)]),
    });
  }

  ngOnInit() {

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      if (this.translate.currentLang === 'ar') {
        $('#loginarea').css("text-align", "right")
        $('#logo_auth').css("text-align", "right")
        $('#slogan_container').removeClass("order-first").addClass("order-last")
        $('logo_container').removeClass("order-last").addClass("order-first")

      } if (this.translate.currentLang === 'fr') {
        $('#slogan_container').removeClass("order-last").addClass("order-first")
        $('logo_container').removeClass("order-first").addClass("order-last")
      }
    })
  }

  changeLang(val) {
    this.translate.use(val)
    this.currentLanguage = val
  }

  loginApi() {
    this.loading = true;
    this.authservice.loginApi(this.user.value).subscribe(res => {
      if (res) {
        localStorage.setItem('currentUser', JSON.stringify(res));
        this.router.navigate(['/plaintes/new']);
        this.loading = false;
      }
    }, error => {
      this.loading = false;
      if (error.status === 400) {
        if (error.error.error === "Votre commune n\'est pas encore inscrit à Baladiaty encore!") {
          $('#not-found').click();
        } else {
          this.showError(error.error.error, 'Erreur!')
        }
      } else if (error.status === 403) {
        this.showError('Veuillez activer votre compte avant de connecter à baladiaty.tn', 'Compte non activé!');
        setTimeout(() => {
          localStorage.setItem('phone', this.user.value.phone);
          this.router.navigateByUrl('/sms');
        }, 2000);
      } else if (error.status === 402) {
        this.showError(error.error.error, 'Erreur!')
      }
    });
  }


  showError(txt, title) {
    this.toastr.error(txt, title);
  }

  public getCurrentlanguage(){
    this.currentLanguage = this.translate.currentLang
  }

}

Я попытался получить текущий язык с помощью службы перевода ngx в панели навигации .ts и установите его как язык по умолчанию, но это не работает! Я думаю попробовать использовать генератор событий и декоратор вывода angular, но я не знаю, как написать это, так как два компонента не имеют отношения родитель-потомок