앵커 2+ 구성 요소에서 HighStock RangeSelector 버튼 이벤트 받기

Question

내 각 구성 요소 내부의 highstock rangeSelector 버튼 이벤트에 액세스하고 싶습니다. angular2-highcharts 패키지를 사용하여 highcharts 라이브러리를 사용하고 있습니다. (afterSetExtremes) 바인딩을 사용했지만 성공하지 못했습니다. 코드는 here입니다. 도와주세요.

감사합니다.

Answer 1

업데이트

template: ` 
    <chart type="StockChart" [options]="options" (click)="onClick($event)"> 
    </chart> 
`, 

기능

onClick(e) { 
    console.log('You clicked '+e.toElement.innerHTML+" button") 
} 

Plunker 데모

Answer 2

확인 TypeScript highcharts 버전 설치 및 아래의 구현과 같은 템플릿.

stackblitz 데모

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { NgModule, ViewChild, ElementRef } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { Component } from '@angular/core'; 
import * as Highcharts from 'highcharts/highstock'; 
import { Jsonp, JsonpModule } from '@angular/http'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 

}) 
export class AppComponent { 
    name = 'Angular 5 Highstock'; 
    @ViewChild("container", { read: ElementRef }) container: ElementRef; 

    constructor(jsonp: Jsonp) { 
    jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => { 


     Highcharts.stockChart(this.container.nativeElement, { 
     rangeSelector: { 
      buttons: [{ 
      type: 'month', 
      count: 1, 
      text: '1m', 
      events: { 
       click: function (e) { 
       console.log('button clickd'); 
       } 
      } 
      }, { 
      type: 'month', 
      count: 3, 
      text: '3m' 
      }, { 
      type: 'month', 
      count: 6, 
      text: '6m' 
      }, { 
      type: 'ytd', 
      text: 'YTD' 
      }, { 
      type: 'year', 
      count: 1, 
      text: '1y' 
      }, { 
      type: 'all', 
      text: 'All1' 
      }] 
     }, 
     chart: { 
      zoomType: 'x' 
     }, 
     series: [{ 
      name: 'AAPL', 
      data: res.json(), 
      tooltip: { 
      valueDecimals: 2 
      } 
     }], 
     xAxis: { 
      events: { 
      afterSetExtremes: (e) => { 
       // console.log(e); 
       // this.button = e.rangeSelectorButton.count; 

      } 
      } 
     }, 
     }) 
    }) 
    } 
}