Angular7：檢測其他組件中變量的變化

Question

我有一個名為 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)

  }

我想檢測當前的語言更改變量（val）並將其發送到其他組件，我應該使用 @Output 裝飾器和 eventEmitor 還是其他東西？

Answer 1

ngx-translate有一項服務，您可以將其注入任何您想要的組件中。

這個服務有這個onLangChange方法，它是 Observable 你可以訂閱並在任何需要的地方獲取當前的語言變化：

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

查看他們的文檔： https://github.com/ngx-translate/core

Answer 2

我總是放這個材料的鏈接，你會看到組件之間如何通信https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

您可以通過 Input、ViewChild、Output() 和 EventEmitter 共享數據，最后一個 - 在不相關的組件之間與 Service 共享數據。

在您的情況下，您可以使用 singleton 來保存 state，並將其注入您需要讀取或更改 state 的任何地方（在您的情況下更改語言）。 https://angular.io/guide/component-interaction#!#bidirectional-service

希望這會有所幫助！