我想使用plain JS(而不是typcript)为我的组件指定一个Input属性.
我唯一可以找到的文件是(来自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);
}
});
但是,它不起作用(也不报告任何错误).
我究竟做错了什么？
对于这些情况,您具有输入和输出属性.请注意,对于TS情况,注释是单数(输入和输出),并且使用简单的JS它们是复数(输入和输出).
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');
}
});
使用输入,您可以使用语法[internalValue：externalValue],这将基本上可以让您做到这一点
<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;
}
});
这是一个plnkr的案例.我希望它有帮助.
