我有两个组件,其中一个带有属性 Select 器.子组件是,
import { Component, OnInit, Input, ElementRef } from '@angular/core';
@Component({
selector: '[app-bar-chart]',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
@Input() chartContainer: ElementRef;
@Input() title: string;
@Input() chartData: {
title: string,
content: {
label: string,
value: number,
fill?: string
}[]
}[];
constructor() { }
ngOnInit() {
console.log(this.chartContainer);
console.log(this.chartContainer.nativeElement);
}
}
父组件是,
import { Component, OnInit, Output, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-dashboard',
template: `<div><div class="graph-image" style="width: 100%; height: 400px;" app-bar-chart [title]="barChartTitle" [chartData]="ChartData" [chartContainer]="chartContainer" #chartContainer></div></div>`,
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
barChartTitle = 'Transaction History';
ChartData = [
{
"title": "May2017",
"content": [
{
"label": "payable",
"value": 10
}
]
},
{
"title": "Jun2017",
"content": [
{
"label": "payable",
"value": 120
}
]
}
];
constructor() { }
ngOnInit() {
}
}
我将本地引用从父组件传递给子组件.当我安慰这个本地引用的原生元素时,它是"未定义的".如何访问native-element 才能访问组件div的样式、宽度和高度.