角2：コンポーネント内の@Inputで何かを行います。

Question

コンポーネント内の@Input値で何かできますか？例えば

：

<log-user [user]="user"></log-user> 

はのはuserがオブジェクトであると仮定しよう。さて、私はどのように私はログユーザーのテンプレート内でこのユーザーデータを渡すことができます知っているが、私はこのuserのコンポーネント内で何かを行うことができますか？

LogUserComponent：

@Component({ 
    selector: 'log-user', 
    template: ` 

    This works: {{user}} 

    ` 
}) 

export class LogUserComponent { 

    @Input() user:any; 

    constructor() { 
    // this get's logged as undefined?? 
    console.log(this.user); 
    } 
} 

すべてのヘルプは素晴らしいことです！前もって感謝します！

Answer 1

建設時に@Inputの値はまだ設定されていません。コンポーネントが実際に構築される前に、Angular2はどのようにして@Inputの値を設定できましたか？

コンポーネントが初期化されるまで待つ必要があります。すべて@Inputの値が設定されていることを意味します。 OnInitインターフェイスを実装することでそうすることができます。

だからあなたの例を修正するには：

<log-user [user]="user"></log-user> 

^{（注：userは、定義されたオブジェクトである必要がありそうでない場合は、まだログに記録されるだろう未定義この例では、確実にするためにlog-user htmlタグに*ngIf="user"を追加することができます。 userが実際に存在する前に、タグがレンダリングされません）}

実行します。

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

@Component({ 
    selector: 'log-user', 
    template: `This works: {{user}}` 
}) 
export class LogUserComponent implements OnInit { 

    @Input() user:any; 

    ngOnInit() { 
    // this now gets logged as 'user' 
    console.log(this.user); 
    } 
} 

また、インターフェイスを実装することなくコンポーネントでngOnInitメソッドを作成することもできますが、Typescriptコンパイラによって保証されているOnInitインターフェイスをインポートすることで、誤植をしません。

Angular docs about OnInit状態：

あなたのディレクティブのデータバインドプロパティが初期化された後、カスタム初期化ロジックを実行するために、このインターフェイスを実装します。

ngOnInitは、ディレクティブのデータバインドプロパティ が最初にチェックされ、その子のいずれかがチェックされた直後に呼び出されます。 がチェックされます。ディレクティブが がインスタンス化されると、1回だけ呼び出されます。

Answer 2

さらに調査したところ、この投稿は「@Input property is undefined in angular 2's onInit」です。

したがって、答えは実際には非常に簡単です。この例ではuserはAPI呼び出しから来るオブジェクトであるため、コンポーネントの初期化時には定義されていません（これが正しい方法であるといいでしょう）。私たちの角度成分は、我々は次のように注入された値を傍受するTSのアクセサを活用することができるしている@Component（）デコレータとES6クラスですので

<log-user *ngIf="user" [user]="user"></log-user>

Answer 3

：*ngIf修正これを使用して

メインを違いは、プロパティを飾る代わりに、私たちはセッターを飾るということです。

詳細http://www.typescriptlang.org/docs/handbook/classes.html

<log-user [user]="user"></log-user> 

インサイドComponent.ts

export class LogUserComponent { 
    private _user:any; 

    get user() { 
    return this._user; 
    } 
    @Input() 
    set user(user:any) { 
    // to catch undefined user 
    if(!user) return; 
    this._user = user; 
    // modify the user here example below 
    // this._user = 'X' + user; 
    } 

    constructor() { 

    } 
}