Div-ID nicht für justGage anerkannt in Winkel 2

Question

Ich bin eine Komponente für Lehren zu schaffen mit JustGage in Winkel 2.

Folgende ist meine Komponente,

@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" 
     }); 
    } 
} 

und seine Verwendung in App-Komponente,

@Component({ 
    selector: 'my-app', 
    template: '<h1>Gauge Demo</h1> <my-gauge gaugeId="testId"></my-gauge>', 
    directives :[GaugeComponet] 
}) 
export class AppComponent { } 

Wenn ich diesen Code leite ich die folgende Ausgabe in der Konsole meinem Browser immer bin,

inside on init with id : testId GaugeComponent.js (line 16) 
* justgage: No element with id : testId found 

Wenn ich die ID in Gauge-Komponente fest codiere, kann ich das Messgerät auf meiner Seite sehen.

Was mache ich falsch?

Answer 1

Sie übergeben testId nicht als Zeichenfolge.

Versuchen Sie folgendes:

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

Oder Sie benötigen die testId Variable in Ihrem AppComponent haben:

@Component({ 
    selector: 'my-app', 
    template: '<h1>Gauge Demo</h1> <my-gauge gaugeId="testId"></my-gauge>', 
    directives :[GaugeComponet] 
}) 
export class AppComponent { 
    testId = 'testId'; 
} 

aktualisieren

Sie müssen auch ngAfterViewInit Haken verwenden, anstatt ngOnInit init 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