Javascript 更改一个组件中的值会影响另一个组件

我有一个angular 6应用程序，它有一个顶部栏，下面有一个内容区域。这些是不同的组件，我目前正在开发用户配置文件页面。用户名称也显示在顶部栏中

我的问题是，每当我在EditUser页面中更新用户名时，它都会成功保存，但顶部栏上的用户名不会更新。在Vue.js中，我可以通过Vuex商店简单地处理这个问题；但我如何处理这个问题呢

---

任何帮助都将不胜感激。

下次请发布一些代码。既然没有，我将用一个例子向您展示如何做到这一点

让我们假设我们有两个组件，A和B。变化将反映在这两个组件上

服务：

export class YourService{
  private data$ = new BehaviorSubject<string>(null);
  data = this.data$.asObservable();

  public setData(data: string){
    this.data$.next(data);
  }
}

更改状态的组件：

export class AnotherComponent{
  constructor(
    private service: YourService
  ) { }

  private changeData(data: string){
    this.service.setData(data);
  }
}

现在一切正常<代码>行为主体允许组件之间的通信。无论何时启动函数

changeData

，您都会看到两个组件上的更改

takeWhile

用于在组件死亡时取消订阅

---

如果您有更多问题，请随时向我询问，我将编辑此答案。

下次发布一些代码。既然没有，我将用一个例子向您展示如何做到这一点

让我们假设我们有两个组件，A和B。变化将反映在这两个组件上

服务：

export class YourService{
  private data$ = new BehaviorSubject<string>(null);
  data = this.data$.asObservable();

  public setData(data: string){
    this.data$.next(data);
  }
}

更改状态的组件：

export class AnotherComponent{
  constructor(
    private service: YourService
  ) { }

  private changeData(data: string){
    this.service.setData(data);
  }
}

现在一切正常<代码>行为主体允许组件之间的通信。无论何时启动函数

changeData

，您都会看到两个组件上的更改

takeWhile

用于在组件死亡时取消订阅

---

如果您有更多问题，请随时向我询问，我将编辑此答案。

您可以创建服务来在组件之间交换数据。可以是UserService提供对当前用户信息的访问

@Injectable()
export class UserService {
    user: UserInfo;
    // define user here (load from backend or somehow else)
}

在用户配置文件.component.ts中

export class UserProfileComponent {

constructor(public userService: UserService) { }
}

export class HeaderComponent {

constructor(public userService: UserService) { }
}

用户配置文件.component.html

<input type="text" [(ngModel)]="userService.user.name">

<span>{{ userService.user.name }}</span>

header.component.html

<input type="text" [(ngModel)]="userService.user.name">

<span>{{ userService.user.name }}</span>

{{userService.user.name}

---

因此Angular DI将创建一个singleton

UserService

，并将相同的对象注入两个组件。当您在其中任何一个中更改时，更改将显示在其他中。

您可以创建服务来在组件之间交换数据。可以是UserService提供对当前用户信息的访问

@Injectable()
export class UserService {
    user: UserInfo;
    // define user here (load from backend or somehow else)
}

在用户配置文件.component.ts中

export class UserProfileComponent {

constructor(public userService: UserService) { }
}

export class HeaderComponent {

constructor(public userService: UserService) { }
}

用户配置文件.component.html

<input type="text" [(ngModel)]="userService.user.name">

<span>{{ userService.user.name }}</span>

header.component.html

<input type="text" [(ngModel)]="userService.user.name">

<span>{{ userService.user.name }}</span>

{{userService.user.name}

---

因此Angular DI将创建一个singleton

UserService

，并将相同的对象注入两个组件。当您在其中任何一个页面中更改时，更改将显示在other中。

Bro，不要只发布没有任何代码的文本。它将获得否决票，每个人都不像这两位先生那样好，他们发布了答案，但没有否决票。兄弟，不要只发布没有任何代码的文本。它将获得否决票，每个人都不像这两位发布答案但没有否决票的绅士那样友好。