Взаимодействие, не связанное с взаимодействием компонентов

Здесь я хочу передать данные из общей службы фильтров в заголовок сводки страницы, где я передаю данные в LastUpdatedTime в файле Release-decision-comComponent.ts.

Сервисный файл фильтра:

lastUpdatedTime : String;

файл Release-Decision-Component.ts:

this.releaseManagementService.getGlobalConfigParameters().subscribe((tableData: ParametersData) => {
    this.filterService.lastUpdatedTime = tableData.createdAt;
})

Файл page-summary-header.html:

<cds-page-title 
    type = "primary" 
    [pageTitle] = "pageTitle" 
    [subTitle] = "subTitle">
</cds-page-title>

Файл page-summary-header.ts:

this.subTitle = `${'releaseManagement.lastUpdated'}:${this.filterService.lastUpdatedTime}`;

Проблема: когда пользователь впервые заходит на сайт, отображается значение LastUpdatedTime undefined. Если я приду еще раз, он покажет правильное значение LastUpdatedTime.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сервисный файл фильтра:

Использует BehaviorSubject для отслеживания LastUpdatedTime. Предоставляет наблюдаемый объект (lastUpdatedTime$) для отправки обновлений времени.

import { BehaviorSubject } from 'rxjs';

export class FilterService {
  private lastUpdatedTimeSubject = new BehaviorSubject<string>(null);
  lastUpdatedTime$ = this.lastUpdatedTimeSubject.asObservable();

  setLastUpdatedTime(time: string) {
    this.lastUpdatedTimeSubject.next(time);
  }
}

Компонент решения о выпуске (release-decision-comComponent.ts)

 Fetches global config parameters.
    Sets lastUpdatedTime in FilterService.
    
this.releaseManagementService.getGlobalConfigParameters().subscribe((tableData: ParametersData) => {
        this.filterService.setLastUpdatedTime(tableData.createdAt);
      });

Компонент заголовка сводной информации о странице (page-summary-header.ts)

Subscribes to lastUpdatedTime$ to update subTitle dynamically.

 this.filterService.lastUpdatedTime$.subscribe(lastUpdatedTime => {
      this.subTitle = `releaseManagement.lastUpdated: ${setDateFormatForTable(lastUpdatedTime)}`;
    });

HTML-шаблон (page-summary-header.html)

Binds pageTitle and subTitle to the component's properties


 <cds-page-title 
      type = "primary" 
      [pageTitle] = "pageTitle" 
      [subTitle] = "subTitle">
    </cds-page-title>

Другие вопросы по теме