Обмен данными между компонентами в Angular 9 - PullRequest
Новая
       10

Обмен данными между компонентами в Angular 9

1 голос
/ 07 мая 2020

У меня есть приложение со специальной библиотекой (tools), содержащей ряд компонентов, которые будут использоваться другими проектами в приложении (назовем один из них data-portal).

Для некоторого контекста в data-portal app.component. html У меня есть: 

<div>
  ...
  <lib-primeng-menu-nav></lib-primeng-menu-nav>
  <router-outlet></router-outlet>
  ...
</div>

, где lib-primeng-menu-nav из библиотеки tools содержит навигацию для проекта и router-outlet может отображать несколько разных представлений, одно из которых показывает несколько диаграмм с данными временных рядов (также из библиотеки tools): example of time series charts

Когда Если пользователь щелкает значок звездочки в левом нижнем углу диаграмм, он должен переключить эту серию из режима просмотра «Анализатор», где несколько серий можно нарисовать на одной диаграмме для сравнения. У меня есть служба анализатора в tools, предназначенная для отслеживания того, какие серии должны отображаться в анализаторе.

Вернувшись к панели навигации, ссылка на анализатор также должна отображать счетчик количества серий. было выбрано: 

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">
  ...
  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>
  ...
</nav>

И вот моя проблема: Я не могу изменить счетчик. При начальной загрузке ссылка отображается как Analyzer (0), как и должно быть, но всякий раз, когда я нажимаю на одну из добавляемых серий, счетчик остается на 0. Если я перейду в представление Анализатора, на дисплее правильно отобразится нужная серия в график, но на панели навигации по-прежнему отображается (0) на счетчике. Все остальное поведение, связанное с просмотром и сервисом анализатора, похоже, работает нормально.

Вот то, что я пробовал до сих пор:

Метод 1

analyzer.service.ts : 

@Injectable({
  providedIn: 'root'
})
export class AnalyzerService {
  // Keep track of series in the analyzer
  public analyzerSeries = [];
  public analyzerData = {
    analyzerTableDates: [],
    analyzerSeries: [],
  };

primeng-menu-nav.component.ts 

  constructor(
    private _analyzerService: AnalyzerService,
    private route: ActivatedRoute,
    private _router: Router
  ) { }
ngOnInit() {
    ...
    this.analyzerSeries = this._analyzerService.analyzerSeries.length;
    ...
  }

primeng- menu-nav.component. html

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">
  ...
  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>
  ...
</nav>

Метод 2

analyzer.service.ts 

  public analyzerSeries = [];
  private analyzerSeriesTest = new BehaviorSubject(null);
  analyzerSeries$ = this.analyzerSeriesTest.asObservable();
  ...
  updateAnalyzer(seriesId) {
    ...
    this.analyzerSeriesTest.next(this.analyzerSeries.length);
    ...
  }

primeng-menu-nav.component.ts 

constructor(
    public _analyzerService: AnalyzerService,
    private route: ActivatedRoute,
    private _router: Router
  ) {
    this.analyzerSeriesCount = this._analyzerService.analyzerSeries$.subscribe((data: any) => {
      this.analyzerSeries = data;
    });
  }

Ни один из них не работал. Я также пробовал использовать EventEmitter вместо Behavior Subject в службе для компонента, на который нужно подписаться, и я наткнулся на стену. Я подозреваю, что услуга предоставляется неправильно, но я не совсем уверен. Насколько я понимаю, 

@Injectable({
  providedIn: 'root'
})

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

1 Ответ

0 голосов
/ 08 мая 2020

Наконец-то разобрался, поэтому решил, что отправлю ответ на всякий случай. У меня был дополнительный «ShareModule» в библиотеке tools, который я импортировал в data-portal app.module.ts для импорта компонентов. Просто понял, что в этом нет необходимости, так как вместо этого я мог просто импортировать tools.module.ts , а удаление ShareModule из импорта устранило мою проблему со счетчиком. Угадайте, что вызвало проблему с предоставлением услуги анализатора.

...