ngOnChanges не обнаруживает изменения, если не опрошен

Question

У меня есть пара компонентов, которые передают данные через события друг другу.Поэтому я пытаюсь использовать интерфейс OnEvents для выполнения каких-либо действий после того, как что-то изменится.Итак, я пытаюсь сделать это просто: мой компонент карты получает событие от своего дочернего компонента, используя функциональность @Output.Затем вызывается метод focusChart().До этого момента все в порядке.Событие прибывает в компонент карты без проблем.Затем я пытаюсь установить переменную в компоненте карты, которую необходимо затем передать в мой компонент диаграммы.Это переменная selectedXPoint.Это действительно установлено в моем компоненте диаграммы, однако метод ngOnChange никогда не вызывается.Единственный способ, которым я могу видеть обновленное значение моего selectedXPoint в моем ChartComponent, - это если я опрошу его как-нибудь.Я использовал setInterval, чтобы регулярно проверять переменную и видеть, что она на самом деле обновляется компонентом карты.Однако я бы не стал опрашивать переменную каждые несколько секунд, чтобы узнать, изменилась ли она.Кто-нибудь, возможно, есть идея?

import { Component, EventEmitter, Input, Output, OnChange, SimpleChanges } from '@angular/core';
import { Axis, Point, SelectedElement, Series, YAxis } from '@fire/chart';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-chart-component',
  templateUrl: './chart.component.html'
})
export class ChartComponent implements OnChange {
  @Input() public selectedXPoint = -1;
  @Output() public pointSelected = new EventEmitter<Point>();


  constructor(private httpClient: HttpClient) {}




  public ngOnInit() {

  }
  public ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }



  public onChartClickEvent(event: any) {
    const point: Point | undefined = this.getPoint(event);
    this.pointSelected.emit(point);
    this.selectedElement = event;
    console.log(event);
  }


  private getPoint(element: SelectedElement): Point | undefined {
    if (element.seriesElements.length === 0) {
      return Point.getDummyPoint();
    }
    const xAxisValue = typeof(element.xAxisValue) === 'string' ? parseInt(element.xAxisValue) : element.xAxisValue;

    return this._points.find((value: Point) => {
      return value.id_dist === xAxisValue;
    });
  }
}

И шаблон, который идет с ним:

<div style="height:500px" *ngIf="series">
  <chart
    [legendVisible]="true"
    [xAxis]="getXAxis()"
    [yAxis]="yAxis"
    (selectedElementEvent)="onChartClickEvent($event)"
    [lineMarkerColor]="bubbleColor"
    [selectedElement]="selectedElement"
    [enableLineMarker]="true"
    [seriesArray]="series"
  >
  </chart>
</div>

Компонент моей карты

import { Component } from '@angular/core';
import { Point } from '@fire/chart';

@Component({
  selector: 'app-geomap',
  templateUrl: './geomap.component.html',
  styleUrls: ['./geomap.component.css']
})
export class GeomapComponent {
  public lat = 50.190968;
  public lng = 14.194336;
  public center = [this.lat, this.lng];
  public zoom = 6;
  public minZoom = 1;
  public maxZoom = 18;
  public pointZoom = 18;
  public selectedXPoint = 1;

  public onPointSelected(point: Point) {
    if (point.longitude && point.latitude) {
      this.lat = point.latitude;
      this.lng = point.longitude;
      this.zoom = this.pointZoom;
      this.center = [this.lat, this.lng];
    }
  }

  public focusChart(event: any) {
    this.selectedXPoint = event.containerPoint.x;

  }

}

Шаблон моей карты:

<div style="height:40%">
  <map
    [perfectView]="true"
    [zoom]="zoom"
    [center]="center"
    (markerClicked)="focusChart($event)"
  >
  </map>
</div>
<div>
  <app-chart-component
    (pointSelected)="onPointSelected($event)"
    [selectedXPoint]="selectedXPoint"
  ></app-chart-component>
</div>

Answer 1

Сторонние библиотеки иногда работают за пределами обнаружения изменения углов, в этих случаях вы можете принудительно запускать обнаружение изменений angular с помощью ChangeDetectorRef и вызываете detectChanges следующим образом:

import { ChangeDetectorRef } from '@angular/core';

// ...

constructor(private cRef: ChangeDetectorRef) { }

public focusChart(event: any) {
  this.selectedXPoint = event.containerPoint.x;
  this.cRef.detectChanges();
}