Question

根据QueryList interface的有限文档，我尝试使用它制作一个组件：

var Pane = ng.Component({
    selector: 'pane',
    properties: ['heading'],
  })
  .View({
    template: `
      <h2>{{heading}}</h2>
      <content></content>`
  })
  .Class({constructor: function PaneCtor() {}});

var Tabs = ng.Component({
    selector: 'tabs',
  })
  .View({
    directives: [Pane, ng.NgFor],
    template: `
      <ul>
        <li *ng-for="#pane of panes">{{pane.heading}}</li>
      </ul>
      <content></content>`
  })
  .Class({
    constructor: [
      new ng.Query(Pane),
      function TabsCtor(panes) {
        this.panes = panes;
      }
    ]
  });

Broken Demo

我如何让它工作？这是ES5 DSL的问题吗？

Answer 1

正如文档（QueryFactory interface）中所示，您必须将queryList作为数组中的第二个值传递。

var MyComponent = ng
  .Component({...})
  .View({...})
  .Class({
    constructor: [new ng.Query(SomeType), function(queryList) {
      ...
    }]
  })

所以你只需要添加它

.Class({
    constructor: [
      [new ng.Query(Pane), function(queryList) {

      }],
      function TabsCtor(panes) {
        this.panes = panes;
      }
    ]
  });

那很简单。这是你的pen updated。

我希望它有所帮助

Angular 2 ES5 QueryList NoAnnotationError

1 个答案: