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

Question

我有一个简单的 Angular2 应用程序，它包含App, P1, P2,Child总共 4 个组件，其中App使用P1and P2，两者都使用P1and 。P2Child

这是代码：

@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);

触发应用程序的index.html<my-test></my-test>包含所有必需的 Angular2 库。

您可以在Plunker中查看演示，控制台日志显示

EXCEPTION: TypeError: viewFactory_ChildCmp0 is not a function

这个应用程序在 Angular2 初始化中中断，一旦我将Child两者都放入P1和P2中，它就会中断。

知道它为什么会坏吗？

Answer 1

首先，使用 Angular 2 beta.1 的未缩小版本，有据可查的是他们在 .min.js 版本上有问题。其次，暂时避免使用 beta.1，您的示例在 beta.0 中完美运行