Question

当我在querySelector（）中对css选择器进行硬编码时，一切顺利。但是，当我将css选择器作为string类型的变量传递时，它不起作用（实际上，当我使用传递给它的css选择器变量记录querySelector的结果时，控制台中有一个对象但是没有任何改变DOM）。在这个组件中，我创建了一个“amChart”图表，我想更改图表的值和类别轴的字体系列。

这是component.ts和component.html文件：

import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer} from '@angular/core';
import { AmChartsService } from '@amcharts/amcharts3-angular';
import { AmChartDataProviderService } from '../../services/amChartDataProvider';
import { LineAmChartsColorPickerService } from '../../services/lineAmChartsColorPicker';

@Component({
  selector: 'am-chart',
  templateUrl: './am-chart.component.html',
  styleUrls: ['./am-chart.component.scss'],
})
export class AmChartComponent implements OnInit, AfterViewInit {
  private chart: any;
  private data: object;
  private cssSelector: string;

  @Input() chartId: string;

  constructor(private _amChartsService: AmChartsService, private _amChartDataProvider: AmChartDataProviderService,
              private _lineAmChartColorPicker: LineAmChartsColorPickerService, private _el: ElementRef, private _renderer: Renderer) {
    this.cssSelector = `#${this.chartId} .amcharts-chart-div`;
  }

  ngOnInit() {
    this.data = this._amChartDataProvider.getData();
    this.data = this._lineAmChartColorPicker.lineAmChartColorPicker(this.data);
    this.chart = this._amChartsService.makeChart(this.chartId, this.data);

    this.chart.addListener('rendered', (event) => {
      this._renderer.setElementStyle(this._el.nativeElement.querySelector(this.cssSelector),
      'font-family', 'B Nazanin');  // this line of code doesn't work properly. I should pass "#chart1 .amcharts-chart-div" instrad of this.cssSelector.
    });
  }

  ngAfterViewInit() {
    this.data = this._amChartsService.makeChart(this.chartId, this.data);
  }

  private zoomChart() {
    this.chart.zoomToIndexes(this.chart.dataProvider.length - 20, this.chart.dataProvider.length - 1);
  }

}

<div id="{{chartId}}" class="chart-dimensions"></div>

Answer 1

我自己找到了答案！首先我应该使用amcharts3而不是amcharts-angular包，因为有一个名为“amchart responsive”的插件可以处理图表容器的更改。其次，我应该只在ngAfterViewInit（）中调用一次makeChart。这是我的最终component.ts和component.html以及component.scss：

import {AfterViewInit, Component, DoCheck, ElementRef, Input, OnInit, Output, Renderer, ViewChild} from '@angular/core';
import { AmChartsService } from '@amcharts/amcharts3-angular';
import { AmChartDataProviderService } from '../../services/amChartDataProvider';
import { LineAmChartsColorPickerService } from '../../services/lineAmChartsColorPicker';

import 'amcharts3';
import 'amcharts3/amcharts/plugins/responsive/responsive.js';
import 'amcharts3/amcharts/serial.js';

import 'ammap3';
import 'ammap3/ammap/maps/js/worldLow';

@Component({
  selector: 'am-chart',
  templateUrl: './am-chart.component.html',
  styleUrls: ['./am-chart.component.scss'],
})
export class AmChartComponent implements OnInit, AfterViewInit {
  private chart: any;
  private data: object;

  @Input() chartId: string;

  @ViewChild('myAmChart') _selector: ElementRef;

  constructor(private _amChartsService: AmChartsService, private _amChartDataProvider: AmChartDataProviderService,
              private _lineAmChartColorPicker: LineAmChartsColorPickerService) { }

  ngOnInit() {
    this.data = this._amChartDataProvider.getData();
    this.data = this._lineAmChartColorPicker.lineAmChartColorPicker(this.data);
    // this.chart = this._amChartsService.makeChart(this.chartId, this.data);
    // this.chart = AmCharts.makeChart(this._selector.nativeElement, this.data);
  }

  ngAfterViewInit() {
    this.chart = AmCharts.makeChart(this._selector.nativeElement, this.data);
  }

  private zoomChart() {
    this.chart.zoomToIndexes(this.chart.dataProvider.length - 20, this.chart.dataProvider.length - 1);
  }
}

.chart-dimensions {
  width:100%;
  height:380px;
}

<div #myAmChart id="{{chartId}}" class="chart-dimensions"></div>

将字符串变量传递给angular2组件

1 个答案: