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

发布时间：2020-12-17 07:44:25 所属栏目：安全来源：网络整理

导读：我想使用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-

我想使用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的案例.我希望它有帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!