Primitive Werte an untergeordnete Komponente übergeben sind im Konstruktor in Angular 2 nicht definiert

Question

Ich bin ziemlich neu in eckigen 2. Ich muss eine wiederverwendbare Komponente des Benutzerprofils Bild, das hat 2 Eingaben von Höhe und Breite, und schließlich stellt ein Bild in der richtigen Größe.

Mein Komponente Aufruf in Parent.html:

<user-profile-pic [height]="50" [width]="50" [counterValue]="myValue"></user-profile-pic> 

meine Komponente User-profile-pic:

import {Component,Input} from '@angular/core'; 

@Component({ 
    selector : 'user-profile-pic', 
    template: '<img src="http://to/picture.png"> ', 
    inputs:['width','height'] 
}) 

export class UserProfilePic { 
    /* 
    @Input() height : String; 
    @Input() width : String; 
*/ 
public height:String; 
public width:String; 
    constructor() { 
     console.log("This is the height ",this.height," And the width : ",this.width); 
    } 

} 

Die Konsole meldet sich meine undefiniert beide auf Höhe und Breite .. Irgendwelche Vorschläge?

Answer 1

Die Eingaben sind im Konstruktor noch nicht festgelegt. Sie werden beim ersten Aufruf ngOnChanges() aufgerufen (für jedes Update aufgerufen). ngOnInit() wird nach ngOnChanges() aufgerufen wird das erste Mal aufgerufen.

ändern Sie einfach Ihren Code

export class UserProfilePic { 
    /* 
    @Input() height : String; 
    @Input() width : String; 
*/ 
public height:String; 
public width:String; 
ngOnInit() { 
     console.log("This is the height ",this.height," And the width : ",this.width); 
    } 
} 

Von Ihrem Beispiel sieht es aus wie Ihre Komponente auch einen counterValue Eingang fehlt.

Answer 2

bereite:

import {Component,Input, OnInit} from '@angular/core'; 

@Component({ 
    selector : 'user-profile-pic', 
    template: '<img src="http://to/picture.png"> ' 
}) 

export class UserProfilePic implements OnInit { 
    @Input() height : String; 
    @Input() width : String; 

    ngOnInit() { 
     console.log("This is the height ",this.height," And the width : ",this.width); 
    } 

}