angular - 获取降级的 ng2 组件的 ContentChildren

Question

我有一个 ng1 应用程序，它使用 upgradeAdapter 引导并使用降级的 ng2 组件。

但是我遇到了@ContentChildren 装饰器的问题。似乎@ContentChildren 没有看到已降级为 ng1 指令的 ng2 组件。

笨蛋:http://plnkr.co/edit/aAoTsTtsJgZXjX3mswcN

父组件:

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1><ng-content></ng-content>',
    directives: [ChildCmp]
})
export class AppComponent {
  @ContentChildren(ChildCmp) members = new QueryList();

  ngAfterContentInit() {
    console.log(this.members); //always with length 0
  }

}

子组件:

@Component({
    selector: 'child-cmp',
    template: '<h2>Child</h2>'
})
export class ChildCmp { }

自举:

var upgradeAdapter = new UpgradeAdapter();
angular.module('ng1App').directive('myApp', upgradeAdapter.downgradeNg2Component(AppComponent));
angular.module('ng1App').directive('childCmp', upgradeAdapter.downgradeNg2Component(ChildCmp));
upgradeAdapter.bootstrap(document, ['ng1App']);

Answer 1

我遇到了同样的问题。但有一个解决方法:

创建一个使用其模板中的父组件和子组件的 Angular 2 包装器组件。在此组件中，您导入父组件和子组件并将它们定义为 @Component 配置中的指令。然后你只需降级你的包装器组件并在你的 html 中使用它。