Question

我有一个angular 6应用程序，它有一个顶部栏和一个位于其下方的内容区域。这些是不同的组件，我目前正在开发用户个人资料页面。用户名也显示在顶部栏中。

我的问题就像每当我在EditUser页中更新了用户名时一样，它成功保存了，但是顶部栏上的用户名没有更新。在Vue.js中，我可以使用Vuex商店轻松处理此问题；但是我该如何在Angular 6中处理呢？

任何帮助将不胜感激。

Answer 1

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

假设我们有两个部分，A和B。更改将同时反映在这两个部分中。

服务：

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

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

A / B.html组件：

<div>{{something}}</div>

A / B.ts组件：

isAlive = true;
something: string;

constructor(
  private service: YourService
) { }

ngOnInit(){
  this.service.data
  .takeWhile(() => this.isAlive)
  .subscribe( res => {
    if(!!res){
      this.something = res;
    }
  });
}

    ngOnDestroy(){
      this.isAlive = false;
    }

更改状态的组件：

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

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

现在一切正常。 BehaviorSubject允许组件之间的通信。每当触发功能changeData时，您都会在两个组件上看到更改。

takeWhile用于在组件死机时退订。

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

Answer 2

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

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

在 user-profile.component.ts

中

export class UserProfileComponent {

constructor(public userService: UserService) { }
}

user-profile.component.html

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

在 header.component.ts

中

export class HeaderComponent {

constructor(public userService: UserService) { }
}

header.component.html

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

因此，复杂的DI将创建一个单例UserService并将相同的对象注入两个组件。而且，当您在其中任何一个位置进行更改时，更改都将显示在其他位置。

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

2 个答案: