Div идентификатор не признается justGage в угловом 2

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 

Когда я жестко указываю идентификатор в компоненте gauge, я могу видеть датчик на моей странице.

Что я делаю неправильно?

Answer 1

Вы не прошли 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'; 
} 

Update

Вы также должны использовать 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