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

Question

我有一个简单的 Angular2 应用程序，它包含 App、P1、P2、Child 总共 4 个组件，其中 App 使用 P1 和 P2，P1 和 P2 都使用 Child.

代码如下：

@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

中完美运行

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

Cannot Inject reusable component to different components in the same level in Angular2

angular2-directives

angular