2016-01-16 10 views
14

プレーンJS(typescriptではなく)を使用してコンポーネントのInputプロパティを指定したいとします。Angular2 Plain JSで入力プロパティを定義する方法

私は見つけることができる唯一のドキュメントは(Angular2 cheat sheetからである)これです:

ng.core.Input(myProperty, myComponent); 
//Declares an input property that we can 
//update via property binding (e.g. <my-cmp [my-property]="someExpression">). 

私は私のコンポーネントのコンストラクタでこれを試してみた:

.Class({ 
    constructor: function() {  
     ng.core.Input(this.name, this);   
    } 
});  

はしかし、それはしていません(エラーも報告されません)。

私は間違っていますか?あなたはinputsoutputs性質を持っているこれらのケースについては

答えて

20

。 TSのケースのための注釈が単数(InputOutput)と、彼らは(inputsoutputs)複数のだ平野JSであることに注意してください。あなたは基本的にあなたにこの

<another-cmp [externalValue]="someExpression"></another-cmp> 

.Component({ 
    inputs : ['internalValue: externalValue'] 
}) 
.Class({ 
    ngOnInit : function() { 

    // 'internalValue' contains 'externalValue' value 
    console.log(this.internalValue); 
    } 
}) 

そして、親コンポーネント

var Parent = ng.core. 
    Component({ 
     selector: 'cmp', 
     template : ` 
      <another-cmp [myValue]="myValue" (emitValue)="printValue($event)"> 
      </another-cmp> 
      What does my children have to say? {{childrenValue}} 
     `, 
     directives : [Children] 
    }). 
    Class({ 
     constructor: function() { 
      this.myValue = 'Some value to pass to children'; 
     }, 
     printValue : function(value) { 
      this.childrenValue = value; 
     } 
}); 

のための操作を行う可能性を与えるだろう構文[internalValue: externalValue]が、ここで実証plnkrだ使用することができますinputs

var Children = ng.core. 
    Component({ 
    inputs : ['myValue'], // Equivalent to @Input('myValue') 
    outputs : ['emitValue'] // Equivalent to @Output() emitValue; 
    }). 
    Class({ 
    constructor: function() { 
     // Initialize emitValue 
     this.emitValue = new ng.core.EventEmitter(); 
    }, 

    // Available at ngOnInit lifecycle 
    ngOnInit : function() { 
     console.log(this.myValue); 
    }, 

    // Value that the component will emit 
    emit : function() { 
     this.emitValue.emit('This is some value from children'); 
    } 
    }); 

場合。私はそれが助けて欲しい

+0

完璧な説明、素晴らしい説明! – pixelbits

+0

素晴らしい!ありがとうございました! JSのドキュメントがない場合は、この情報をどこに取得するのか知りたいと思っています。 – eagor

+0

Hmm ..私はそれを動作させることができませんし、Plunkerの例ではChromium 53で「EXCEPTION:RangeError:Maximum call stack size exceeded」がスローされます。https://angular.io/docs/ts/最新/チュートリアル/ toh-pt3.htmlからES2015 – dotnetCarpenter

関連する問題