Angular2 Как определить свойство ввода в простой JS

Я хочу указать свойство Input для моего компонента, используя простой JS (не typescript).

Единственная документация, которую я могу найти, - это (это из обложки Angular2 ):

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

Однако он не работает (сообщений об ошибках не сообщается).

Что я делаю неправильно?

Ответ 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, демонстрирующий случай. Надеюсь, это поможет.