Angular ViewChild несколько ссылок разного типа на один и тот же элемент - PullRequest
Новая
       67

Angular ViewChild несколько ссылок разного типа на один и тот же элемент

0 голосов
/ 17 июня 2020

Я строю график, используя ng2-диаграммы. Шаблон html выглядит следующим образом: 

<canvas baseChart #chart 
  [datasets]="bubbleChartData" 
  [options]="bubbleChartOptions" 
  [colors]="bubbleChartColors"
  [legend]="bubbleChartLegend" 
  [chartType]="bubbleChartType" 
  id="chartCanvas">
</canvas>

Теперь мне нужны две ссылки на холст с помощью директивы angular s @ViewChild(). Один типа BaseChartDirective (который необходим для функций onClick диаграммы), а другой типа ElementRef, чтобы установить радиальный градиент в качестве фона (взято отсюда: Попытка применить градиент к моему ng2-charts chart: createLinearGradient не является функцией ).

Проблема, с которой я столкнулся, заключается в том, что свойство @ViewChild('chart') private canvas: ElementRef всегда не определено. При попытке доступа к nativeElement в функции ngOnInit, как это: 

const gradient = this.canvas.nativeElement.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'white');
this.chartColors = [
   {
       backgroundColor: gradient
   }
];

, я получаю следующую ошибку при попытке инициализировать gradient: 

ERROR TypeError: Cannot read property 'nativeElement' of undefined

Мой вопрос в том, что * Директива 1019 * поддерживает эту функцию множественных ссылок на один и тот же элемент, и если нет, если есть какой-либо другой способ получить ссылку на холст диаграммы без использования @ViewChild().

Любая помощь приветствуется, заранее спасибо.

...