無法將可重用組件注入Angular2中同一級別的不同組件

Question

我有一個簡單的Angular2應用程序，其中總共包含4個組件，分別包含App ， P1 ， P2和Child ，其中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

當我將Child放入P1和P2 ，此應用程序在Angular2初始化中中斷，然后中斷。

知道為什么會破裂嗎？

Answer 1

首先，對Angular 2 beta.1使用最小化版本，有充分的文檔證明它們在.min.js版本中存在問題。 其次，暫時避免使用beta.1，您的示例可以在beta.0中完美運行