Question

我有一个顶部导航栏，显示客户的{{name}}。但是现在我在应用程序中的某个地方有另一个页面/组件，可以更新客户的信息。假设我已经更新了客户的姓名，如何我更新了显示客户名称的顶部导航栏吗？

top-navbar绑定到userInfo组件，另一个页面是另一个组件。现在，我正在寻找类似全局变量的内容，该变量会从任何其他组件中更改并得到反映。这样我可以将客户的{{name}}与该全局变量绑定，然后从应用程序中的任何位置更新该变量。

有可能吗？

谢谢

Answer 1

是有可能的，有很多方法可以实现此功能，我正在分享其中一种我们可以通过服务来实现这一目标创建服务

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class UserService {
  // Observable string sources
  private nameChangeSource = new Subject<string>(); 
  // Observable string streams
  nameChangedAnnounced$ = this.missionAnnouncedSource.asObservable();

  announcedTheName(mission: string) {
    this.nameChangeSource .next(mission);
  }  
}

导航栏组件中的

注入此服务并添加订阅

  constructor(private userService : UserService ) {
    userService.nameChangedAnnounced$.subscribe(
      name=> {
       console.log(name);
      });
  }

从页面发送这样的名称

this.userService.announcedTheName(name);

双向绑定全局变量

1 个答案: