typescriptファイル内のディレクティブの入力値を取得

Question

ディレクティブに渡す入力は、htmlファイル内に正しく表示されますが、typescriptファイル内の値は取得されません。 typescriptファイルの中でどのようにアクセスできますか？ここ

は一例であり：

Iは次のようにtest-info.tsに定義されているディレクティブを有する：test-info.html内部

@Component({ 
selector: 'test-info', 
templateUrl: 'test-info.html' 
}) 
export class TestInfo { 
    @Input('location') location; 
    constructor(...) { 
    console.log('this.location: ' + this.location); //------> Prints null 
    } 

私が持っている：

{{location}} 

I内部このディレクティブを使用し別のhtml user.htmlファイル：

<test-info [location]='location'> </test-info> 

場所はuser.htmlに正しく表示されますが、.tsファイルのconsole.logコマンドではnullが出力されます。

編集： user.tsでは、ロケーションはAjaxコールで割り当てられます。おそらくこれがコンストラクタまたはngOnInit（）がこの値を逃す理由です。しかし、それが更新されたらどうしたらいいですか？

Answer 1

ngOnChangesフックを試してみてください。あなたが本当に正しい値を変更するなら、あなたはそのフックでそれを得るべきです。

ngOnChanges() { 
    console.log('this.location: ' + this.location); 
} 

もう一つの方法は、*ngIfでコンポーネントをラップしている：

<test-info *ngIf="location" [location]='location'> </test-info>