无法将可重用组件注入Angular2中同一级别的不同组件

时间:2016-01-26 07:17:54

标签: angular angular2-directives

我有一个简单的Angular2应用程序,其中包含AppP1P2Child共4个组件,其中App使用{{1} }和P1P2P1都使用P2

以下是代码:

Child

触发应用的 index.html 是普通的@Component({ selector: 'child', template: '<div> child <div>', }) export class ChildCmp {} @Component({ selector: 'p1', template: '<div> P1: <child></child></div>', directives:[ChildCmp], }) export class P1Cmp {} @Component({ selector: 'p2', template: '<div> P2: <child></child><child></child></div>', directives:[ChildCmp], }) export class P2Cmp {} @Component({ selector: 'my-test', template: '<p1></p1><p2></p2>', directives:[P1Cmp, P2Cmp], }) export class TestApp {} bootstrap(TestApp); ,包含Angular2所需的所有库。

您可以在Plunker,控制台日志显示

中查看演示
<my-test></my-test>

一旦我将EXCEPTION: TypeError: viewFactory_ChildCmp0 is not a function 放入ChildP1,这个应用就会在Angular2初始化中断,然后就会中断。

知道它为什么会破裂吗?

1 个答案:

答案 0 :(得分:3)

首先,使用Angular 2 beta.1的未经编辑的版本,有很好的文档证明他们有.min.js版本的问题。其次,现在避免使用beta.1,你的示例在beta.0中完美运行