Передача строковой переменной в querySelector () в компоненте angular2

Question

Передача строковой переменной в querySelector () в компоненте angular2

1

Когда я жестко кодирую селектор css внутри querySelector(), все идет хорошо. Но когда я передаю селектор css как переменную типа string, он не работает (на самом деле, когда я регистрирую результат запросаSelector с переданной ему переменной селектора css, в консоли есть объект, но ничего не изменилось 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>

Rooholah Abolhasani 05 июль 2017, в 02:24

Источник

Теги:

javascript

amcharts

selectors-api

1 ответ

Ещё вопросы

Rooholah Abolhasani · Answer 1 · 2017-07-05T16-58-00.000Z

Я нашел ответ сам! Сначала я должен использовать amcharts3 вместо amharts-angular package, потому что есть плагин под названием "amchart responsive", который обрабатывает изменение контейнера диаграммы. Во-вторых, я должен только вызвать makeChart один раз в ngAfterViewInit(). Здесь мои final 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>