Блог

У меня есть вложенные компоненты. Я хочу вызвать метод в компоненте внука, когда я нажимаю на переключатель в главном родительском компоненте.

Большой родительский компонент

 <div class="col text-right">
            Show Values:
            <ejs-switch
              class="form-control form-control-sm"
              (change)="displayGrillsValue($event)"
              [checked]=true
            ></ejs-switch>
        </div>

    <div class="row">
            <div class="col">
              <div class="ContentControl">
                <app-grills-kpi [isInEdit]="isInEdit" [maxWidth]="'450px'" [maxHeight]="'30px'" [controlName]="ControlName.GrillsKPI1"></app-grills-kpi>
              </div>
            </div>
            <div class="col">
              <div class="ContentControl">
                <app-grills-kpi [isInEdit]="isInEdit" [maxWidth]="'450px'" [maxHeight]="'30px'" [controlName]="ControlName.GrillsKPI2"></app-grills-kpi>
              </div>
            </div>
          </div>
  

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

 <app-grills-kpi-chart #chart [grillsKPIModel]="grillsKPIModel" [exportName]="formattedKPIName">
        </app-grills-kpi-chart>
  

Большой дочерний компонент :

Это метод, который я хочу вызвать

 displayGrillsValue = ($event) => {
    this.chart.visibleSeries.forEach(element => {
      if($event.checked){
        element.marker = this.marker;
      }else {
      element.marker.dataLabel.visible =  $event.checked;
      }
    });
    this.chart.refresh();
  }
  

Пожалуйста, подскажите мне, как лучше всего это сделать. Также, если вы заметили, что у меня есть 2 диаграммы в большом родительском компоненте. Поэтому, когда я нажимаю кнопку переключения, я хочу, чтобы обе диаграммы обновлялись методом большого дочернего компонента.

вы можете использовать BehaviorSubject или Subject для запуска вызова функции

TriggerService.ts

 @Injectable()
export class TriggerService{
  constructor(){}
  private _trigger = new BehaviorSubject<string>('');
  castTrigger = this._trigger.asObservable();
  
  trigger(){
    this._trigger.next(''); 
  }
}
  

parent.component.ts

   constructor(private triggerService: TriggerService){}

  displayGrillsValue(){
      this.triggerService.trigger();
  }
  

child.component.ts

 constructor(private triggerService: TriggerService){}

ngOnInit(){
    this.triggerService.castTrigger.subscribe(data => // grand child component logic here);
}
  

демонстрация stackblitz