Angular2 не загружает вложенные компоненты

Question

Это должны быть простейшие возможные вложенные компоненты, но когда я загружаю это (через systemjs), все, что я вижу в браузере, это «Счетчики», а <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 свойства View (или Component). См. 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);