我正在使用角度2中的JustGage创建用于量规的组件。
以下是我的内容,
@Component({
selector: 'my-gauge',
template: '<div id={{gaugeId}} style="width:200px; height:150px;" ></div>'
})
export class GaugeComponet implements OnInit {
@Input()
gaugeId: String;
ngOnInit() {
console.log("inside on init with id : " + this.gaugeId);
var g = new JustGage({
id: this.gaugeId,
value: 45,
min: 0,
max: 100,
title: "Title"
});
}
}
及其在应用程序组件中的用法,
@Component({
selector: 'my-app',
template: '<h1>Gauge Demo</h1> <my-gauge gaugeId="testId"></my-gauge>',
directives :[GaugeComponet]
})
export class AppComponent { }
当我运行此代码时,我在浏览器控制台中得到以下输出,
inside on init with id : testId GaugeComponent.js (line 16)
* justgage: No element with id : testId found
当我将ID硬编码到量表组件中时,我可以在页面上看到量表。
我究竟做错了什么?
您不testId
作为字符串传递。
试试这个:
<my-gauge gaugeId="'testId'"></my-gauge>
或者您需要在testId
变量中包含AppComponent
:
@Component({
selector: 'my-app',
template: '<h1>Gauge Demo</h1> <my-gauge gaugeId="testId"></my-gauge>',
directives :[GaugeComponet]
})
export class AppComponent {
testId = 'testId';
}
更新
您还需要使用ngAfterViewInit
钩子而不是ngOnInit
初始化JustGage
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句