Угловое изменение страницы через дочерний компонент

Question

Я использую Angular 6, я хочу изменить название компонента с «НЕ ПРОВЕРЕНО» на «ПРОВЕРЕНО» при каждом нажатии кнопки «СОХРАНИТЬ».

Проблема, с которой я сталкиваюсь, заключается в том, что «Кнопка «Сохранить» управляется через другой компонент.Итак, как мне обновить заголовок страницы из другого компонента?

Я пытался использовать BehaviourSubject, но проблема все еще возникает.

Вот пример кода для BehaviourSubject, который я использую:

export class ComponentTitleService {
  componentTitle = new BehaviorSubject < string > ('');
  title = this.componentTitle.asObservable();
  constructor() {}
  updateTitle(title: string) {
    this.componentTitle.next(title);
  }
}

Родительский компонент с TITLE:

this.componentTitleService.title.subscribe(title => {
  this.componentTitle.next(title);
});

Компонент, который обновляет заголовок:

this.componentTitleService.title.subscribe(title => {
  let newTitle: string = title;
  newTitle.replace("NOT VERIFIED", "VERIFIED");
  this.componentTitleService.componentTitle.next(newTitle);
});

Answer 1

Вот правильное использование для вашего сервиса:

export class ComponentTitleService {
  private componentTitle = new BehaviorSubject < string > ('');
  public title = this.componentTitle.asObservable();
  constructor() {}

  updateTitle(title: string) {
    this.componentTitle.next(title);
  }
}

Некоторые компоненты, которые используют заголовок:

1) Добавить службу как общедоступную для конструктора:

...
constructor(public titleService: ComponentTitleService)
...

2) В вашем шаблоне используйте асинхронный канал:

<h2>{{ titleService.title | async }}<h2>

Некоторый компонент, который обновляет заголовок. Вам не нужно менять заголовок внутри компонента, просто отправьте новый заголовок в сервис

 someMethod(){
     ...
     this.componentTitleService.componentTitle.next(newTitle);
     ...
}

Answer 2

вам не нужно подписываться на заголовок, доступный для вызова следующей функции. Просто позвоните this.componentTitleService.componentTitle.next(newTitle);, чтобы обновить заголовок. В вашем фрагменте, поскольку вы подписываетесь на наблюдаемый заголовок и обновляете заголовок в обратном вызове, он никогда не вызывается, поскольку ваш заголовок никогда не выдает значение.

вам нужен только субъект и titleComponent для отображения значения этого предмета через асинхронный канал. затем вызовите следующий метод субъекта из любого места, где вы хотите обновить заголовок. Посмотрите на этот небольшой пример: https://stackblitz.com/edit/angular-gv1rrj