将字符串变量传递给 angular2 组件中的 querySelector()

Question

当我在 querySelector() 中对 CSS 选择器进行硬编码时，一切顺利。但是，当我将 css 选择器作为字符串类型的变量传递时，它不起作用（实际上，当我使用传递给它的 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>