0

を使用して、ng2 親コンポーネント内に動的に ng1 コンポーネントをロードしようとしていますViewContainerRef.createComponent()。プランカーはこちら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 でログに記録されます。それまでの間、ここに回避策のあるプランカーがあります。

于 2016-07-12T16:30:06.383 に答える