这应该是最简单的嵌套组件,但是当我(通过 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);
最佳答案
您必须在 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);
关于Angular2 不加载嵌套组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33212485/