Question

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

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

Plunker：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
  }

}

ChildComponent ：

@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中使用它。

Answer 2

我创建了一个包装模块来解决此问题。

@NgModule({
    imports: [],
    declarations: [
        WrapComponent,
        ParentComponent,
        ChildComponent
    ],
    exports: [
        WrapComponent,
        ParentComponent,
        ChildComponent,
    ],
    entryComponents:[WrapComponent],
})
export class WrapModule {
    constructor(){
        console.log('WrapModule');
    }
}

例如：Plunker

获取降级的ng2组件的ContentChildren

2 个答案: