如何调用 grand child 组件中的方法

Question

我有嵌套组件。当我在 grand parent 组件中按下切换时，我想在 grandchild 组件中调用一个方法。

大 Parent 组件

<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>

Parent 分量：

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

大 child 组件：

这是我要调用的方法

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

请指导我最好的方法。另外，如果您注意到我在盛大 parent 中有 2 个图表。因此，当我按下切换按钮时，我希望通过 grand child 方法刷新两个图表。

Answer 1

您可以使用 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 demo

如何调用 grand child 组件中的方法

How to call an method in grand child component

angular

typescript

angular9