Angular7：检测其他组件中变量的变化

Question

I have a component named navbar contain a drop down to change language by 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)

  }

I want to detect the current language change varible (val) and send it to other component, should I use @Output decorator and eventEmitor or some thing else?

Answer 1

ngx-translate has a service that you can inject in any component you want.

This service has this onLangChange method which is Observable you can subscribe to and get the current language change wherever needed:

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

Checkout their docs: https://github.com/ngx-translate/core

Answer 2

I always put the link to this material, you'll see how to communicate between components https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

You can share data via Input, via ViewChild, via Output() and EventEmitter and the last one - sharing data between unrelated components with a Service.

In your case, you can use a singleton to hold the state, and inject it everywhere you need it to read or change the state (in your case change the language). https://angular.io/guide/component-interaction#!#bidirectional-service

Hope that will help!