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

【问题标题】：Angular7 : detect change of variable in other componentAngular7：检测其他组件中变量的变化
【发布时间】：2020-04-08 13:53:54
【问题描述】：

我有一个名为 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 还是其他东西？

【问题讨论】：

标签： javascript angular components output ngx-translate

【解决方案1】：

ngx-translate 有一个服务，你可以将它注入到任何你想要的组件中。

这个服务有这个onLangChange 方法，它是可观察的，你可以订阅并在任何需要的地方获取当前的语言变化：

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

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

【讨论】：

【解决方案2】：

我一直放这个材料的链接，你会看到组件之间如何通信https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

您可以通过 Input、ViewChild、Output() 和 EventEmitter 以及最后一个 - 在不相关的组件之间通过 Service 共享数据来共享数据。

在您的情况下，您可以使用单例来保存状态，并将其注入您需要读取或更改状态的任何地方（在您的情况下更改语言）。 https://angular.io/guide/component-interaction#!#bidirectional-service

希望这会有所帮助！

【讨论】：