在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響應”的插件可以處理圖表容器的更改。 其次，我應該只在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>