Angular2不加载嵌套组件

Question

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

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

您必须指定在模板中使用的View（或Component）directives属性的所有指令。请参阅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);