Question

我想使用普通JS（而不是typescript）为我的组件指定一个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);        
   }
});

但是，它不起作用（也没有报告错误）。

我做错了什么？

Answer 1

对于这些情况，您拥有inputs和outputs属性。请注意，对于TS情况，注释是单数（Input和Output），而使用普通JS，它们是复数（inputs和outputs）。

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');
    }
  });

使用inputs，你可以使用语法[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来证明这个案子。我希望它有所帮助。

Angular2如何在Plain JS中定义输入属性

1 个答案: