Изменение значения в одном компоненте влияет на другой

Question

У меня есть угловое приложение 6, у которого есть верхняя панель и область содержимого ниже. Это разные компоненты, и я сейчас занимаюсь разработкой страницы профиля пользователя. Имя пользователя также отображается в верхней панели.

Моя проблема в том, что всякий раз, когда я обновляю имя пользователя на странице EditUser, оно успешно сохраняется, но оно не обновляется в верхней панели. В Vue.js я могу просто справиться с этим в магазине Vuex; но как я могу справиться с этим в Angular 6.

Любая помощь будет высоко ценится.

Answer 1

Вы можете создать сервис для обмена данными между компонентами.Это может быть 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 и внедрит один и тот же объект в оба компонента.И когда вы измените его в любом из них, изменения будут показаны в другом.

Answer 2

В следующий раз опубликуйте немного кода. Поскольку нет, я покажу вам, как это сделать на примере.

Давайте предположим, что у нас есть два компонента, 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 для отмены подписки, когда компонент умирает.

Если у вас есть дополнительные вопросы, не стесняйтесь задавать их мне, и я отредактирую этот ответ.