在angular中，如何从component.ts访问类方法？_Angular_Class_Highcharts

在angular中，如何从component.ts访问类方法？

angular class highcharts

在angular中，如何从component.ts访问类方法？,angular,class,highcharts,Angular,Class,Highcharts,我正在做一个角度项目，在那里我有一个按钮，我想它隐藏所有，但一个特定的系列海图。这可能很简单，但我只做了一段时间的web开发，在一些基础知识上有点欠缺。我不是一个真正的网络开发者，但我同意承担一些工作，而不是让公司雇佣一个知道他们在做什么的人。无论如何，一个合适的开发人员为我设置了这个项目，并向我展示了如何做我想做的事情，但他目前正在休假，我有点卡住了因此，我使用highcharts来显示一些数据。我有一个highcharts文件夹，其中包含一个名为highcharts-component.t

我正在做一个角度项目，在那里我有一个按钮，我想它隐藏所有，但一个特定的系列海图。这可能很简单，但我只做了一段时间的web开发，在一些基础知识上有点欠缺。我不是一个真正的网络开发者，但我同意承担一些工作，而不是让公司雇佣一个知道他们在做什么的人。无论如何，一个合适的开发人员为我设置了这个项目，并向我展示了如何做我想做的事情，但他目前正在休假，我有点卡住了

因此，我使用highcharts来显示一些数据。我有一个highcharts文件夹，其中包含一个名为highcharts-component.ts的可重用组件，如下所示：

import { Component, ElementRef, Input, OnDestroy, OnInit } from "@angular/core";
import { chart } from "highcharts";
import * as Highcharts from "highcharts";
import drilldown from "highcharts/modules/drilldown.src.js";
drilldown(Highcharts);
declare var require: any;
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/solid-gauge")(Highcharts);
require("highcharts/modules/heatmap")(Highcharts);
require("highcharts/modules/treemap")(Highcharts);
require("highcharts/modules/funnel")(Highcharts);

@Component({
  selector: "app-chart",
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class ChartComponent implements OnDestroy, OnInit {
  @Input()
  set options(value: Highcharts.Options) {
    this._options = value;
    this.chart = chart(this.elementRef.nativeElement, this._options);
  }

  private chart: Highcharts.ChartObject;
  private _options: Highcharts.Options;

  constructor(private elementRef: ElementRef) {}

  ngOnDestroy() {
    this.chart = null;
  }

  ngOnInit() {
    this.chart = chart(this.elementRef.nativeElement, this._options);
  }

  public showSingleSeries(seriesNumber) {
    for (let x = 0; x < this.chart.series.length; x++) {
      if (x == seriesNumber) {
        this.chart.series[seriesNumber].show();
      } else {
        this.chart.series[seriesNumber].hide();
      }
    }
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, OnInit, ViewChild, ElementRef, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as Highcharts from "highcharts";

/**
 * @title Card with multiple sections
 */
@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {

   myChart: Highcharts.Options = {
    // Created pie chart using Highchart
      chart: {
        type: 'pie'
      },
      title: {
        text: 'Contents using Pie chart'
      },
      subtitle: {
        text: '3D donut in Highcharts'
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45
        }
      }
  };
  constructor() {
  }
  ngOnInit() {
    this.loadChart();  
  }

  loadChart()
  {
    this.myChart = {
      ...this.myChart,
       series: [{
        name: 'Operating Systems',
        data: [
          {
            name: 'Windows',
            y: 88.19,
            drilldown: 'windows-versions'
          },
          ['MacOSX', 9.22],
          ['Linux', 1.58],
          ['Others', 1.01]
        ]
      }],
      drilldown: {
        series: [{
          name: 'Windows versions',
          id: 'windows-versions',
          data: [
            ['Win 7', 55.03],
            ['Win XP', 15.83],
            ['Win Vista', 3.59],
            ['Win 8', 7.56],
            ['Win 8.1', 6.18]
          ]
        }]
      }
    }
  }

  showSingleSeries(seriesNumber)
  { 
    // Where I want to call the showSingleSeries method in highcharts-component.ts
  }

}

 <button (click)="showSingleSeries(0)">Remove All Series But Windows</button>
<button (click)="showSingleSeries(1)">Remove All Series But Linux</button>

    <app-chart [options]="myChart"></app-chart>

public showSingleSeries(seriesNumber) {
    for (let x = 0; x < this.chart.series.length; x++) {
      if (x == seriesNumber) {
        this.chart.series[x].show();
      } else {
        this.chart.series[x].hide();
      }
    }
  }

我的html文件如下所示：

import { Component, ElementRef, Input, OnDestroy, OnInit } from "@angular/core";
import { chart } from "highcharts";
import * as Highcharts from "highcharts";
import drilldown from "highcharts/modules/drilldown.src.js";
drilldown(Highcharts);
declare var require: any;
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/solid-gauge")(Highcharts);
require("highcharts/modules/heatmap")(Highcharts);
require("highcharts/modules/treemap")(Highcharts);
require("highcharts/modules/funnel")(Highcharts);

@Component({
  selector: "app-chart",
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class ChartComponent implements OnDestroy, OnInit {
  @Input()
  set options(value: Highcharts.Options) {
    this._options = value;
    this.chart = chart(this.elementRef.nativeElement, this._options);
  }

  private chart: Highcharts.ChartObject;
  private _options: Highcharts.Options;

  constructor(private elementRef: ElementRef) {}

  ngOnDestroy() {
    this.chart = null;
  }

  ngOnInit() {
    this.chart = chart(this.elementRef.nativeElement, this._options);
  }

  public showSingleSeries(seriesNumber) {
    for (let x = 0; x < this.chart.series.length; x++) {
      if (x == seriesNumber) {
        this.chart.series[seriesNumber].show();
      } else {
        this.chart.series[seriesNumber].hide();
      }
    }
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, OnInit, ViewChild, ElementRef, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import * as Highcharts from "highcharts";

/**
 * @title Card with multiple sections
 */
@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {

   myChart: Highcharts.Options = {
    // Created pie chart using Highchart
      chart: {
        type: 'pie'
      },
      title: {
        text: 'Contents using Pie chart'
      },
      subtitle: {
        text: '3D donut in Highcharts'
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45
        }
      }
  };
  constructor() {
  }
  ngOnInit() {
    this.loadChart();  
  }

  loadChart()
  {
    this.myChart = {
      ...this.myChart,
       series: [{
        name: 'Operating Systems',
        data: [
          {
            name: 'Windows',
            y: 88.19,
            drilldown: 'windows-versions'
          },
          ['MacOSX', 9.22],
          ['Linux', 1.58],
          ['Others', 1.01]
        ]
      }],
      drilldown: {
        series: [{
          name: 'Windows versions',
          id: 'windows-versions',
          data: [
            ['Win 7', 55.03],
            ['Win XP', 15.83],
            ['Win Vista', 3.59],
            ['Win 8', 7.56],
            ['Win 8.1', 6.18]
          ]
        }]
      }
    }
  }

  showSingleSeries(seriesNumber)
  { 
    // Where I want to call the showSingleSeries method in highcharts-component.ts
  }

}

 <button (click)="showSingleSeries(0)">Remove All Series But Windows</button>
<button (click)="showSingleSeries(1)">Remove All Series But Linux</button>

    <app-chart [options]="myChart"></app-chart>

public showSingleSeries(seriesNumber) {
    for (let x = 0; x < this.chart.series.length; x++) {
      if (x == seriesNumber) {
        this.chart.series[x].show();
      } else {
        this.chart.series[x].hide();
      }
    }
  }

删除除Windows以外的所有系列
删除除Linux以外的所有系列

谢谢
编辑：我在代码中编辑了几个bug，并更改了图表类型。我已经用解决方案更新了stackblitz。谢谢@Lys
编辑
您希望父对象调用childs方法。您应该使用查看子对象
在html中

在ts文件中
@ViewChild（“图表”）图表
然后称之为this.charts.showSingleSeries（1）
您好。谢谢你的回答，但我还有一个后续问题。如果我将该方法移动到一个新文件中，文件中就不会有this.chart
对象，对吗？