どの角度2

Question

にディレクティブタグを通じて値を送信する私は、別のコンポーネントから指令メタタグを介してデータを送信しようとしていますが、私は誰も私を提案してくださいhelp.Thanksをit.Can慰めたときにエラー未定義を示しています。

私のコンポーネント、

import { ModalComponent } from './modal/modal.component'; 
@Component({ 
    selector: 'my-app', 
    template: `<modal [hero]="value"></modal>' 
}) 
export class CommonComponent { 
    value : anny ='1'; 

}

@Component({ 
    selector: 'modal', 
    templateUrl : './modal/model.component.html' 
}) 
export class CommonComponent { 
    @Input() hero:any; 
    consrtuctor(){ 
    console.log(this.hero) ///// shows o/p as undefined 

}

Answer 1

lifecycle hooksを見てみましょう。角度において

、コンストラクタは、依存性注入のために使用されます。あなたは@Input()@Output()と同様の装飾に対処したいときに、コンポーネントのライフサイクルでの組み込み関数のいずれかを呼び出す必要があります。

代わりのconstructor() {...}、使用：

ngOnInit() { 
    console.log(this.hero); // not undefined 
} 

Answer 2

あなたが直面している問題は、あなたのコンストラクタが呼び出された時点で、@Inputと@outputバインディングが角度によってまだ設定されていないということです。あなたの主人公の属性が未定義として表示されている理由です。あなたのコンポーネントの初期化時に@Inputおよび/または@outputバインディングを利用したい場合は、角度が最初にそれらを利用するようにしようとする前に、これらのバインディングを初期化するまで待たなければなりません。

角度は、この非常に同じことを達成するために、ライフサイクルフックを提供します。基本的に、コンポーネントにngOnInitというメソッドを定義すると、Angularがコンポーネントの初期化を完了した後、そのメソッドが呼び出されます。そしてその時点で、あなたのバインディングにはあなたが期待する価値があります。

だから、あなたのクラスは、よりのようにする必要があります。一般的には

export class CommonComponent { 
    @Input() hero:any; 
    constructor(){ } 

    ngOnInit() { 
    console.log(this.hero) // will be defined at this point 
    } 
} 

は、あなたが本当に、あなたのコンストラクタが呼び出された時点で、再び（なぜなら、あなたのコンストラクタでのどれも任意の実際の初期化ロジックを持たないべきではありませんあなたバインディングが適所にある）。大部分のコンポーネントでは、コンストラクタはコンストラクタへのパラメータとしてこれらのサービスをリストすることによってサービスの依存関係を要求するためにのみ使用されます - コンポーネントの初期化はngOnInitで行われます。

は多くを学ぶためにlifecycle hooks guideを参照してください。