[英]Angular7 : detect change of variable in other component
我有一个名为 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 还是其他东西?
ngx-translate
有一项服务,您可以将其注入任何您想要的组件中。
这个服务有这个onLangChange
方法,它是 Observable 你可以订阅并在任何需要的地方获取当前的语言变化:
onLangChange.subscribe((event: LangChangeEvent) => {
// do something
});
我总是放这个材料的链接,你会看到组件之间如何通信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
希望这会有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.