0

我正在尝试在 ng2 父组件中动态加载 ng1 组件ViewContainerRef.createComponent()。这是 plunker https://plnkr.co/edit/HADJILztGEELg5lavfvP?p=preview

但是它会引发以下异常：

ViewWrappedException {_wrapperMessage: "Error in ./DynamicComponent class DynamicComponent - inline template:0:27", _originalException: TypeError: Cannot read property 'scope' of null
    at new UpgradeNg1ComponentAdapter (https://npmcd…, _originalStack: "TypeError: Cannot read property 'scope' of null?  …ular/core@2.0.0-rc.2/bundles/core.umd.js:8276:49)", _context: DebugContext, _wrapperStack: "Error: Error in ./DynamicComponent class DynamicCo…DNGqj1u/src/dynViewComponent.ts!transpiled:84:45)"}_context: DebugContext_originalException: TypeError: Cannot read property 'scope' of null

这是 ng1-comp.js

define( ['bootstrap'], 
function( ng1 ) {
  'use strict';

    ng1.ngModule.component('ng1Comp', {
      template:'<h1>NG1 Comp </h1>',
    });
} );

这是动态加载器：

@Component({
  selector: 'my-app',
  template: `
    <div>This is dynamic view container</div>
  `
})
export class App {
  private _componentRef: ComponentRef<any>;
  private vcRef:any;  
  constructor(private viewContainerRef: ViewContainerRef, private resolver: 
  ComponentResolver){
      this.vcRef = this.viewContainerRef;
  }

  public ngAfterViewInit(){
    if (this._componentRef) {
        this._componentRef.destroy();
        this._componentRef = null;
    }

    System.import('js/ng1-comp.js');    

    const metadata = new ComponentMetadata({
        directives: [upgradeAdapter.instance.upgradeNg1Component('ng1Comp') ],
        selector: 'dynamic-content',
        template: '<ng1-comp></ng1-comp>'
    });
    this.createComponentFactory(this.resolver, metadata)
      .then(factory => {
        const injector = ReflectiveInjector.fromResolvedProviders([], 
          this.vcRef.parentInjector);
        this.vcRef.createComponent(factory, 0, injector, []);
      });
  }

  private createComponentFactory(resolver: ComponentResolver, 
      metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
    const cmpClass = class DynamicComponent {};
    const decoratedCmp = Component(metadata)(cmpClass);
    return resolver.resolveComponent(decoratedCmp);
  }

}

感谢任何指针..

4

1 回答 1

0

看起来这是一个问题UpgradeAdapter。它要求在启动应用程序之前完成所有 NG1 升级。解决方法是升级所有动态加载的 NG1 组件，以便在UpgradeAdapter.bootstrap()调用之前进行预升级。

问题#9959使用 angualr2 github 记录。与此同时，这里是解决方法的plunker。

于 2016-07-12T16:30:06.383 回答