在模板中访问传递的绑定

Question

我尝试使用Angular 2创建一个组件。它运行正常，但我不确定如何将值作为绑定传递。 这是代码：

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      templateUrl: './app/grid.htm',
      bindings:{
          info:'=info'
      }
    })
    .Class({
      constructor: function() {
          this.items = [
                { id: 1, name: 'Roy', age: 25 },
                { id: 2, name: 'James', age: 30 }
            ];
      }
    });
})(window.app || (window.app = {}));

从视图部分我将构造函数中的项传递为：

<my-app info="items">Loading...</my-app>

但我无法在模板templateUrl: './app/grid.htm',

中访问它

以下是模板代码：

<tr *ngFor='#item of info'>
                    <td>
                        <span>{{ item.name }}</span>
                    </td> 
                    <td>
                        <span>{{ item.age }}</span>
                    </td>
 </tr>

但它不起作用。任何人都可以指出可能出错的地方吗？

Answer 1

根组件（@Input()）目前不支持

AppComponent。

另见https://github.com/angular/angular/issues/1858

作为解决方法，您可以使用

.Class({
  constructor: [ ElementRef, function(ref) {
    ref.nativeElement.getAttribute('mydata');
  }]
});

在您的HTML文件中：

<my-app mydata="Some sample data">
  loading...
</my-app>

（仅允许字符串）

但在您的情况下，您不需要info属性。由于您的数据已加载到组件中并设置为其中一个属性，因此您可以直接在ngFor中使用它们：

<tr *ngFor='#item of items'>
  (...)
</tr>

修改

您可以通过父组件（<display [data]="items"></display>）中的输入元素传递数据，如下所述：

App.DisplayComponent = ng.core
    .Component({
      selector: 'display',
      inputs: [ 'data' ],
      template: '<div>' +
        '  <tr *ngFor="#item of data">' +
        '    <td>' +
        '      <span>{{ item.name }}</span>' +
        '    </td>' +
        '    <td>' +
        '      <span>{{ item.age }}</span> ' +
        '    </td>' +
        '  </tr>' +
        '</div>'
    })
    .Class({
        constructor: function() {}
    });

App.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: '<display [data]="items"></display>',
      directives: [App.DisplayComponent]
    })
    .Class({
        constructor: function() {
          this.items = [
            { id: 1, name: 'Roy', age: 25 },
            { id: 2, name: 'James', age: 30 }
          ];
        }
    });

以下是一个样本plunkr：https://plnkr.co/edit/Ki6e9KgsPaiHIxfhKH3E?p=preview。