Angular 9 Функция вызова родителя и ребенка - PullRequest
Новая
       7

Angular 9 Функция вызова родителя и ребенка

0 голосов
/ 26 апреля 2020

Моя функция вызова родительского компонента на двух дочерних компонентах. У меня ошибка на втором компоненте.

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

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;
    });
  }
}

ОШИБКА TypeError: Невозможно прочитать свойство 'getWaitStatData' undefined в 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)

1 Ответ

1 голос
/ 26 апреля 2020

Вы не добавили ngx-accordion в родительский шаблон. html template. Вот почему его взлом. Другой компонент, работающий так, как он доступен у вашего родителя. html

...