角度 2 中的 justGage 无法识别 Div id

Question

我正在使用 JustGage 在角度 2 中创建仪表组件。

以下是我的组件，

@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 进行硬编码时，我可以在我的页面上看到仪表。

我做错了什么？

Answer 1

您不会将 testId 作为字符串传递。

试试这个：

<my-gauge gaugeId="'testId'"></my-gauge>

或者您需要在您的AppComponent 中包含testId 变量：

@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

• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
• http://www.bennadel.com/blog/3002-correlating-directive-life-cycle-events-to-dom-state-in-angularjs-2-beta-1.htm