質問

私は、自分のコンポーネントにプロパティ値を渡そうとして行き詰っています。私が読んだものから、すべてが正しく見えます。しかし、それはまだ動作していません。私のテスト値は、画面とコンソールにnullとして出力されます:(

これは私のテストコンポーネントです。

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

@Component({
    selector: 'TestCmp',
    template: `Test Value : {{test}}`
})

export class TestCmp {

    @Input() test: string;

    constructor()
    {
        console.log('This if the value for user-id: ' + this.test);
    }
}

このように、親ページからコンポーネントを呼び出しています。

<TestCmp [test]='Blue32'></TestCmp>

ページがレンダリングされるとき、テスト値は空です。テスト値:」としか表示されません。

Test Value : Blue32'ではなく、'Test Value : Blue32'と表示されます。

どのように解決するのですか？

私が注意できることは4つあります。

• ルートコンポーネントで入力を渡していますが、これはうまくいきません。
• alexpodsさんがおっしゃるように、CamelCaseを使っていますね。使ってはいけません。
• を通して文字列の代わりに式を渡している。 [test] . これはつまり、angular2 が Blue32 という名前の変数を探していることを意味します。
• コンストラクタを使用しています。それはうまくいきません。 ビューが初期化された後でなければなりません。 データバインドプロパティが初期化された後でなければなりません (詳しくは OnInit ).

というわけで、いくつかの修正でうまくいくはずです。

ベータ 1 に更新された例

import {Component, Input} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector : 'childcmp',
  template: `Test Value : {{test}}`
})
class ChildCmp {
    @Input() test: string;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

@Component({
    selector: 'testcmp',
    template : `<childcmp [test]="'Blue32'"></childcmp>`
    directives : [ChildCmp]
})
export class TestCmp {}

bootstrap(TestCmp);

これを見る plnkr を例として見てください。

更新情報

まだこの回答が届いていないようなので、plnkrをベータ1に更新し、説明の1点を修正しました：ngAfterViewInitでは入力にアクセスできますが、ngOnInitではライフサイクルの早い段階でアクセスすることができます。