Angular2 不加载嵌套组件

Question

这应该是最简单的嵌套组件，但是当我（通过 systemjs）加载它时，我在浏览器中看到的所有内容都是 "Counters"，并且 <counter></counter> 已添加到 DOM。 "Hello Counter" 或 counter 组件没有任何处理迹象。

import angular from 'angular2/angular2';

var AppComponent = angular
  .Component({
    selector: 'my-app',
    template: '<h1>Counters</h1><counter></counter>'
  })
  .Class({
    constructor: function () { }
  });

angular
  .Component({
    selector: 'counter',
    template: '<h2>Hello counter</h2>'
  })
  .Class({
    constructor: function () {}
  });

angular.bootstrap(AppComponent);

Answer 1

您必须在 directives property of View (or Component). See this plunker 中指定模板中使用的所有指令。正确代码：

var Counter = angular
  .Component({
    selector: 'counter',
    template: '<h2>Hello counter</h2>'
  })
  .Class({
    constructor: function () {}
  });

var AppComponent = angular
  .Component({
    selector: 'my-app',
    directives: [Counter], // <-- Here we are!
    template: '<h1>Counters</h1><counter></counter>'
  })
  .Class({
    constructor: function () { }
  });

angular.bootstrap(AppComponent);

Angular2 不加载嵌套组件

Angular2 not loading nested components

angular