Comment puis-je mettre un Google Chart Angulaire 4

Comment pouvez-vous intégrer une google chart dans angulaire 4 application?

J'ai lu la réponse à la question ici, mais je crois qu'il est incomplet. En gros, je suis d'essayer la même stratégie que la réponse précédente, à l'aide d'un GoogleChartComponent et un autre composant qui s'étend. Deux erreurs, la première est un manque d'appel à super() pour le composant enfant et la deuxième est l'appel à la "nouvelle" dans le présent code

  createBarChart(element: any): any {
      return new google.visualization.BarChart(element);
  }

J'obtiens le message d'erreur "de google.la visualisation.BarChart n'est pas un constructeur".

Je vois l'un des commentaires mentionne également l'utilisation de <ng-content> pour la projection de données, mais il n'est pas clairement définie.

En essayant de poser une "bonne" question, voici mon GoogleChartComponent:

export class GoogleChartComponent implements OnInit {
  private static googleLoaded: any;
  constructor() {
    console.log('Here is GoogleChartComponent');
  }

  getGoogle() {
    return google;
  }

  ngOnInit() {
    console.log('ngOnInit');
    if (!GoogleChartComponent.googleLoaded) {
      GoogleChartComponent.googleLoaded = true;
      google.charts.load('current', {
        'packages': ['bar']
      });
      google.charts.setOnLoadCallback(() => this.drawGraph());
    }
  }

  drawGraph() {
      console.log('DrawGraph base class!!!! ');
  }

  createBarChart(element: any): any {
      return new google.visualization.BarChart(element);
  }

  createDataTable(array: any[]): any {
      return google.visualization.arrayToDataTable(array);
  }
}

Et mon enfant composant qui s'étend:

@Component({
  selector: 'app-bitcoin-chart',
  template: `
   <div id="barchart_material" style="width: 700px; height: 500px;"></div>
  `,
  styles: []
})
export class BitcoinChartComponent extends GoogleChartComponent  {
 private options;
  private data;
  private chart;
  //constructor() {
  //  super();
  //  console.log('Bitcoin Chart Component');
  //}
  drawGraph() {
    console.log('Drawing Bitcoin Graph');
    this.data = this.createDataTable([
     ['Price', 'Coinbase', 'Bitfinex', 'Poloniex', 'Kraken'],
     ['*', 1000, 400, 200, 500]
    ]);

    this.options = {
     chart: {
                    title: 'Bitcoin Price',
                    subtitle: 'Real time price data across exchanges',
                },
                bars: 'vertical' //Required for Material Bar Charts.
    };

    this.chart = this.createBarChart(document.getElementById('barchart_material'));
    this.chart.draw(this.data, this.options);
  }
}

OriginalL'auteur Frederick John | 2017-07-11