Angular7: обнаружить изменение переменной в другом компоненте - PullRequest
Новая
       27

Angular7: обнаружить изменение переменной в другом компоненте

0 голосов
/ 08 апреля 2020

У меня есть компонент с именем navbar, содержащий раскрывающийся список для изменения языка с помощью ngx / translate: 

<div class="traduction">
        <ul>
          <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img style="width:20px; height:20px;"class="img-profile rounded-circle" [src]="translate.currentLang == 'fr' ? '../../../assets/img/fr.png' : '../../../assets/img/ar.png'">
            </a>
            <div class="lang-menu dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
              <a class="dropdown-item" (click)="changeLang('fr')">
                <i class="far fa-flag fa-sm fa-fw mr-2 text-gray-400"></i>
                Français
              </a>
              <a class="dropdown-item" (click)="changeLang('ar')">
                <i class="far fa-flag fa-sm fa-fw mr-2 text-gray-400"></i>
                عربي
              </a>
            </div>
          </li>
        </ul>
      </div>

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

  changeLang(val) {
    this.translate.use(val)
    this.currentlng.emit(val)

  }

Я хочу определить текущее изменение языка varible (val) и отправить это к другому компоненту, я должен использовать декоратор @Output и eventEmitor или что-то еще?

Ответы [ 2 ]

0 голосов
/ 08 апреля 2020

Я всегда ставлю ссылку на этот материал, вы увидите, как происходит обмен данными между компонентами https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

Вы можете обмениваться данными через Input, через ViewChild, через Output () и EventEmitter и последний - обмен данными между несвязанными компонентами с Сервисом.

В вашем случае вы можете использовать одноэлементный файл для хранения состояния и вставлять его везде, где вам нужно, чтобы прочитать или изменить состояние (в вашем случае измените язык). https://angular.io/guide/component-interaction#! # Двунаправленный сервис

Надеюсь, что это поможет!

0 голосов
/ 08 апреля 2020

ngx-translate имеет сервис, который вы можете внедрить в любой компонент, который вы хотите.

Этот сервис имеет этот onLangChange метод, который можно наблюдать, на который вы можете подписаться и получать текущие изменения языка везде, где это необходимо: 

onLangChange.subscribe((event: LangChangeEvent) => {
  // do something
});

Оформить заказ: https://github.com/ngx-translate/core

...