@Input（）の値は常に定義されていません

Question

@Input()の値をとるuser photo componentを作成しました。この値はuserIdです。値が渡された場合、私はFirebaseからこのユーザーIDにリンクしている情報を取得し、そうでなければ何かを実行します。

私のユーザーの写真の部品

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

@Component({ 
    selector: 'user-photos', 
    templateUrl: './user-photos.component.html', 
    styleUrls: ['./user-photos.component.css'] 
}) 

export class UserPhotoComponent implements OnInit { 

    @Input() userId: string; 

    constructor() { 

     console.log('userId is:',this.userId); 

    } 


    ngOnInit() { 


    } 

    ngOnDestroy() { 

    } 
} 

あなたが今、私のedit-profile componentに、私は次のようしている、私は@Input()としてのuserIdを宣言している見ることができるように：

<user-photos [userId]="TestingInput"></user-photos> 

今すぐユーザー写真コンポーネントを取得しますh1タグが表示されているように表示されますが、userIdは常に定義されていませんか？

開発者向けのコンソールにエラーは表示されていないので、間違ったことを完全にはわかっていません。

Answer 1

コンストラクタではなくngOnInitで初期化されます。あなたは、単一のティックで値を囲むことによって、それを文字列として渡す必要が[]文字列と使用ブラケットなどのリテラルを渡す場合も

ngOnInit() { 
    console.log('userId is:',this.userId); 
} 

（もAngular Life Cycle Hooks documentation。を確認してください）。

<user-photos [userId]="'TestingInput'"></user-photos> 

それはあなたがまた起こる場合を除き（不定となりますTestingInputという名前のプロパティ/フィールドを取得し、合格しようとすることのないように、その理由を含む式が含有する成分のコンテキストで評価されますその名前のフィールドはです）。