[英]Ionic5 component get @ViewChild not working
I am trying to implement a plot into a ionic component based on these examples: https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52/我正在尝试根据这些示例将绘图实现到离子组件中: https : //enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52/
I simply copy & paste the stuff into a component but when I run the component the @ViewChild
will not be found.我只是将内容复制并粘贴到组件中,但是当我运行该组件时,将找不到
@ViewChild
。 I tried it with the ionic native @ViewChild
option and with document.getElementByID
but both will not return the plot element.我尝试使用离子本机
@ViewChild
选项和document.getElementByID
但两者都不会返回绘图元素。 this.barChart
. this.barChart
。 will be undefined and crash the createBarChart
function.将是未定义的
createBarChart
函数崩溃。
I have the feeling that because it is a component the document.getElementByID
searches the parent document tree and not the component document.我有一种感觉,因为它是一个组件,所以
document.getElementByID
搜索父文档树而不是组件文档。
HTML: HTML:
<ion-content>
<ion-card class="welcome-card">
<ion-card-header>
<ion-card-subtitle>Number of Viewers per season for</ion-card-subtitle>
<ion-card-title>Game of Thrones</ion-card-title>
</ion-card-header>
<ion-card-content>
<canvas #barChart></canvas>
</ion-card-content>
</ion-card>
</ion-content>
TS TS
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
selector: 'app-plot',
templateUrl: './plot.component.html',
styleUrls: ['./plot.component.scss'],
})
export class PlotComponent implements OnInit {
@ViewChild('barChart') barChart: ElementRef;
bars: any;
colorArray: any;
constructor() { }
ngOnInit() {
this.createBarChart();
}
createBarChart() {
this.bars = new Chart(this.barChart.nativeElement, {
type: 'bar',
data: {
labels: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
datasets: [{
label: 'Viewers in millions',
data: [2.5, 3.8, 5, 6.9, 6.9, 7.5, 10, 17],
backgroundColor: 'rgb(38, 194, 129)', // array should have same number of elements as number of dataset
borderColor: 'rgb(38, 194, 129)', // array should have same number of elements as number of dataset
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
}
As @fridoo mentioned you are trying to initialize a dom element inside ngOnInit hook, whereas the template code has not been initialized yet.正如@fridoo 提到的,您正在尝试在 ngOnInit 钩子内初始化一个 dom 元素,而模板代码尚未初始化。
Specifically with HTMLCanvasElement it is best to use Ionic's IonViewDidEnter hook as then your Canvas element and other elements (such as ion-header) will fully initialize and you will be able to reliably refer to the element as well is its offsets.特别是对于 HTMLCanvasElement,最好使用 Ionic 的 IonViewDidEnter 钩子,因为这样您的 Canvas 元素和其他元素(例如 ion-header)将完全初始化,并且您将能够可靠地引用该元素及其偏移量。
You can see it this way:你可以这样看:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'my-page',
templateUrl: './my-page.component.html',
styleUrls: ['./my-page.component.css']
})
export class MyPageComponent {
@ViewChild('barChart') barChart: ElementRef;
constructor() {}
ngOnInit() {
console.log(this.barChart)
if (this.barChart) {
console.log(this.barChart.nativeElement.getBoundingClientRect())
}
};
ngAfterViewInit() {
console.log(this.barChart)
if (this.barChart) {
console.log(this.barChart.nativeElement.getBoundingClientRect())
}
};
ionViewDidEnter() {
console.log(this.barChart)
if (this.barChart) {
console.log(this.barChart.nativeElement.getBoundingClientRect())
}
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.