angle2コンポーネントのquerySelector（）への文字列変数の受け渡し

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

私は答えを自分自身を発見しました！ まず、チャートのコンテナの変更を処理する "amchart responsive"というプラグインがあるので、amcharts-angularパッケージの代わりにamcharts3を使用してください。 第2に、ngAfterViewInit（）でmakeChartを1回だけ呼び出す必要があります。

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>

： ここに私の最終component.tsとcomponent.htmlとcomponent.scssです