Question

我想从同一事件中调用javascript函数和typescript函数。这是图表中的onClick事件。我对打字稿和尖角字体比较陌生，所以我不知道自己在做什么甚至有可能。

问题是：我需要调用javascript函数以在图表中获取激活的条形，而要调用typescript函数以在角度组件中打开对话框。

    onClick: function(evt){

      console.log(this);//<-- returns chart

      bar: () => {console.log(this)}; //<-- here I try to get this as component
      bar(); // <--doesnt work

      //console.log(document.getElementById('myChart'));
  }

如果我把整个事情都展示出来的话，也许是甜蜜的。

  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    onHover: console.log('onHover'),

    onClick: function(evt){
      //console.log(evt); Mouse Event
      console.log(this);
      const getFirst = array => console.log(this);
      console.log(getFirst);
      //bar: () => {console.log(this)};
      //bar();
      //console.log(document.getElementById('myChart'));
  },
    /*
    onClick : (evt, datasets) => {
      //let self = this;
      //console.log(self);
      if(datasets.length > 0){
        this.openDialog();
        console.log(this);
        console.log(this.barChart);
      }
    },*/
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    },
    legend: {
      display: true,
      position: 'right'
    },
    tooltips: {
      enabled: true,
      mode: 'point'
    }
  };

这是我的html模板：


  my-bar-dialog works!
  <div>
    <div style="display: block">
      <canvas baseChart
              id="myChart"
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType">
      </canvas>
    </div>
  </div>

  <button mat-raised-button (click)="openDialog()">Pick one</button>
  <button (click)="openDialog()">Pick one</button>

现在，问题是我有两个不同的“ this”： 1）

    onClick: function(evt){
      let that = this;
      let bar=()=> {console.log(that.this)};
      bar();

  },

2）

    onClick : (evt, datasets) => {
      if(datasets.length > 0){
        console.log(this);
      }
    },

1返回一个字符，2返回该组件。但是我需要在同一事件/函数中同时使用它们，因为我需要调用chartjs api函数，并且需要从我的组件中调用函数。

这是我的组件

import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { BarChartService } from '../bar-chart.service';
import { barChartClass } from '../barChartClass';

declare var foo: Function;

@Component({
  selector: 'app-my-bar-dialog',
  templateUrl: './my-bar-dialog.component.html',
  styleUrls: ['./my-bar-dialog.component.css'],
})
export class MyBarDialogComponent implements OnInit {

  client: string;
  tenant: string;

  constructor(public dialog: MatDialog, private barChartService: BarChartService) {
    foo();
  }
  //First BarChart
  barChart: barChartClass;
  public barChartLabels: any;
  public barChartType: any;
  public barChartLegend: any;
  public barChartData: any;

  getBarChart(): void {
    this.barChartService.getMockBarChart().subscribe(
      barChart => this.barChart = barChart
    );
    this.barChartData = this.barChart.barChartData;
    this.barChartLabels = this.barChart.barChartLabels;
    this.barChartType = this.barChart.barChartType;
    this.barChartLegend = this.barChart.barChartLegend;
  }

  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    onHover: console.log('onHover'),


    onClick: function(evt){
      //console.log(evt); Mouse Event
      //console.log(this);
      let that = this;
      //bar: () => {console.log(this)};
      let bar=()=> {console.log(that.this)};
      bar();
      //bar();
      //console.log(document.getElementById('myChart'));
  },
    /*
    onClick : (evt, datasets) => {
      //let self = this;
      //console.log(self);
      if(datasets.length > 0){
        this.openDialog();
        console.log(this);
        console.log(this.barChart);
      }
    },*/
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    },
    legend: {
      display: true,
      position: 'right'
    },
    tooltips: {
      enabled: true,
      mode: 'point'
    }
  };

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogData, {
      width: '250px',
      data: {client: this.client, tenant: this.tenant}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.client = result;
    });
  }
  ngOnInit() {
    this.getBarChart();
  }
}

@Component({
  selector: 'dialog-data',
  templateUrl: 'dialog-data.html',
  styleUrls: ['dialog-data.css']
})
export class DialogData {

  constructor(
    public dialogRef: MatDialogRef<DialogData>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Answer 1

您对函数中的竖线和冒号所做的操作是试图描述其类型而不是声明它。因此，如果您想实际声明该函数，请执行以下操作：

onClick: function(evt) {

    console.log(this);//<-- returns chart

    let bar = () => { console.log(this) };
    bar();

    //console.log(document.getElementById('myChart'));
  }

如果要描述和声明它，请执行以下操作：

  onClick: function(evt) {

    console.log(this);//<-- returns chart

    let bar: () => void = () => { console.log(this) }; //<-- here I try to get this as component
    bar(); // <--doesnt work

    //console.log(document.getElementById('myChart'));
  }

Answer 2

在使用组件中的图表之前，请将其分配给其他变量，例如

var that=this

然后在图表中

 onClick: function(evt){

      console.log(this);//<-- returns chart

   let   bar= () => {console.log(that)}; //<-- that should have your component refrence

  }

Stackblitz demo

如何在同一事件中调用打字稿箭头功能和JavaScript功能

2 个答案: