在ES5中如何声明Angular 2组件的输入？

Question

Angular2当前的文档没有提供使用es5语法中@Input和@Output的示例。

我正在尝试构建一个angular2 fiddle，因此需要使用es5。

这是es2016版本。

class BankAccount {
  @Input() bankName: string;
  @Input('account-id') id: string;
  // this property is not bound, and won't be automatically updated by Angular
  normalizedBankName: string;
}

- CheapSteaks

Answer 1

在 Component 注解中使用 inputs 和 outputs 属性。请参见此 plunker。

var BankAccount = ng
  .Component({
    selector: 'bank-account',
    template: '<b>{{ bankName }}<b><span>{{ id }}',
    inputs: [
      'bankName', 
      'id: accountId'
    ]
  })
  .Class({
    constructor: function() {
      this.bankName = null;
      this.id = null;
    }
  });

- alexpods

---

如何在HTML中实现它？类似这样：<bank-account id="1"></bank-account> - asubanovsky

请查看答案中提到的 Plunkr。您应该使用 <bank-account [accountId]="someProperty"></bank-account>。在示例中，使用的是 Angular2 的 alpha 版本，因此您应该使用 account-id 而不是 accountId。 - Sergey P. aka azure

你能展示一下它的用法吗？这非常有用。 - Saeed Neamati

我还想知道如何从普通的HTML向组件传递数据。答案中提到的Plunkr从父组件调用<bank-account>组件。 - Jefferson Lima