子コンポーネントに渡されるプリミティブな値は、コンストラクタで角度2で定義されていません

Question

私は角度2の新しいです。 高さと幅の2つの入力を持つ再利用可能なコンポーネントを作成する必要があります。正確な大きさの画像。

parent.htmlで私のコンポーネントの呼び出し：

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

私のコンポーネントユーザープロファイル-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); 
    } 

} 

コンソールは、高さと幅の両方私の未定義をログに記録します。.. 任意の提案ですか？

Answer 1

コンストラクタに入力がまだ設定されていません。これらは、最初にngOnChanges()が呼び出されたときに設定されます（更新ごとに呼び出されます）。最初にngOnChanges()が呼び出された後にngOnInit()が呼び出されます。

ちょうどあなたの成分もcounterValue入力が欠落しているように見えるあなたの例から

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

にコードを変更します。

Answer 2

はそれを試してみてください。

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

}