Страница изменения Angular через дочерний компонент
Я использую 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);
});
Ответы 2
вам не нужно подписываться на наблюдаемый заголовок для вызова следующей функции. Просто позвоните this.componentTitleService.componentTitle.next(newTitle);, чтобы обновить заголовок.
В вашем фрагменте, поскольку вы подписываетесь на наблюдаемый заголовок и обновляете заголовок в обратном вызове, он никогда не вызывается, поскольку ваш заголовок никогда не выдает значение.
вам нужен только предмет и заголовокКомпонент для отображения значения этого предмета через асинхронный канал. затем вызовите следующий метод субъекта из любого места, где вы хотите обновить заголовок. См. этот небольшой пример: https://stackblitz.com/edit/angular-gv1rrj
Вот правильное использование вашего сервиса:
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);
...
}