Angular 9 Parent Child 调用函数

Question

我的 parent 组件在两个子组件上调用函数。我在第二个组件上有错误。

Parent 组件

import { Component, Input, ViewChild } from '@angular/core';
import { EchartsAreaStackComponent } from './echart/echarts-area-stack.component';
import { AccordionComponent } from './accordion/accordion.component';

@Component({
  selector: 'hg-waitstats',
  styleUrls: ['./waitStats.component.scss'],
  templateUrl: './waitStats.component.html',
})
export class WaitStatsComponent {
  @ViewChild(EchartsAreaStackComponent) EchartsAreaStackComponent: EchartsAreaStackComponent ; //work
  @ViewChild(AccordionComponent) AccordionComponent: AccordionComponent ; //not work
  @Input() selectedLimit: String = '3';

  ngAfterViewInit() { 
    // child is set
    this.EchartsAreaStackComponent.changeLimit(this.selectedLimit); // work
    this.AccordionComponent.getWaitStatData(this.selectedLimit);   // not work 
  } 

  changeLimit(limit: any){
    this.EchartsAreaStackComponent.changeLimit(limit); //work
    this.AccordionComponent.getWaitStatData(limit);  // not work
  }

}

parent html

<div class="col-6">
    <nb-card>
      <nb-card-header>
        <nb-select [selected]="selectedLimit" (selectedChange)="changeLimit($event)">
          <nb-option value="5">Top 5</nb-option>
          <nb-option value="3">Top 3</nb-option>
          <nb-option value="1">Top 1</nb-option>
      </nb-select>
      </nb-card-header>
      <nb-card-body>
        <ngx-echarts-area-stack></ngx-echarts-area-stack>
      </nb-card-body>
    </nb-card>
  </div>

工作组件（EchartsAreaStackComponent）

import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { WaitStatsService } from '../../../../@core/backend/common/services/waitStats.service';
import { WaitType } from '../../../../@core/interfaces/common/waitStats';
import { UserStore } from '../../../../@core/stores/user.store';
import { User } from '../../../../@core/interfaces/common/users';

@Component({
  selector: 'ngx-echarts-area-stack',
  templateUrl: './echarts-area-stack.component.html',
  styleUrls: ['./echarts-area-stack.component.scss'],
  providers:[WaitStatsService]
})
export class EchartsAreaStackComponent implements AfterViewInit, OnDestroy {
  options: any = {};
  themeSubscription: any;

  user: User;
  legendData: WaitType[];
  seriesData: {};
  seriesX: {};
  selectedLimit: String = '3';

  constructor(
    private theme: NbThemeService,
    private service: WaitStatsService,
    private userStore: UserStore
  ) {}

  ngOnInit()
  {
    this.getWaitStatData(this.selectedLimit);
  }

  getWaitStatData(limit){
    ...
  }

  changeLimit(limit) {
    if (this.selectedLimit !== limit) {
      this.selectedLimit = limit;

      this.getWaitStatData(this.selectedLimit);
    }
  }

ngAfterViewInit() {

   ...
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

发生错误的组件（AccordionComponent）

import { Component } from '@angular/core';
import { WaitStatsCategoriesService } from '../../../../@core/backend/common/services/waitStatsCategories.service';

@Component({
  selector: 'ngx-accordion',
  templateUrl: 'accordion.component.html',
  styleUrls: ['accordion.component.scss'],
  providers:[WaitStatsCategoriesService]
})
export class AccordionComponent {

  accordion;

  selectedLimit: String = '3';
  waitTypes: {};

  constructor(
    private service: WaitStatsCategoriesService
  ) {}

  toggle() {
    this.accordion.toggle();
  }

  ngOnInit()
  {
    this.getWaitStatData(this.selectedLimit);
  }

  getWaitStatData(limit){
    this.service.getTopWaitType( limit )
    .subscribe( (data) => {
      this.waitTypes = data.waitTypes;
    });
  }
}

错误类型错误：无法读取未定义的属性 'getWaitStatData' 在 WaitStatsComponent.ngAfterViewInit (:4200/app-pages-pages-module.js:208942) 在 callHook (:4200/vendor.js:40119) 在 callHooks (:4200/vendor.js:40083) 在 executeInitAndCheckHooks (:4200/vendor.js:40024) 在 refreshView (:4200/vendor.js:46856) 在 refreshDynamicEmbeddedViews (:4200/vendor.js:48145) 在 refreshView (:4200/vendor.js:46803) 在 refreshComponent (:4200/vendor.js:48220) 在 refreshChildComponents (:4200/vendor.js:46511) 在 refreshView (:4200/vendor.js:46832)

Answer 1

您还没有在 parent.html 模板中添加 ngx-accordion。这就是它破裂的原因。其他组件在您的 parent.html

中可用

Angular 9 Parent Child 调用函数

Angular 9 Parent Child Call Function

angular9