2角度：動的コンポーネントをロードしようとしてき：TypeError例外を：プロパティを読み取ることができません「parentInjector」

Question

私はangular2で動的にコンポーネントをロードしようとしていますし、それがで出erroringだ：

例外：エラー：キャッチされない（中約束）：TypeError例外：未定義

のプロパティ 'parentInjector' を読み取ることができません、これはコードです：

@Component({ 
    selector: 'Notes5', 
    template: `<span #extensionAnchor></span>` 
}) 

export class Notes5 extends NotesBase { 
    constructor(private dynamicComponentLoader:DynamicComponentLoader, private NotesService:NotesService, 
       protected sliderPanel:Sliderpanel, 
       protected commBroker:CommBroker) { 

     this.LoadComponentAsync("src/comps/app2/notes/NoteDynamic", "TestComponent", this.extensionAnchor); 
    } 

    @ViewChild('extensionAnchor', {read: ViewContainerRef}) extensionAnchor:ViewContainerRef; 

    public LoadComponentAsync(componentPath:string, componentName:string, locationAnchor:ViewContainerRef) { 
     System.import(componentPath) 
      .then(fileContents => { 
       console.log(fileContents); 
       return fileContents[componentName] 
      }) 
      .then(component => { 
       this.dynamicComponentLoader.loadNextToLocation(component, locationAnchor) 
      }); 
    } 
} 

任意のアイデア？

よろしく

ショーン

Answer 1

あなたの元のエラーは、実際のクラス名とあなたがレンダリングdynamicallしようとしているコンポーネントの名前の間の不整合によって引き起こされる：あなたはクラスの必須TestComponentを参照している場合は、IEまた、TestComponentと命名されます。

現在のエラーTypeError: Cannot read property 'parentInjector'は、コンストラクタで呼び出すので、ビューがレンダリングされる前にコンテンツを@ViewChild要素にロードしようとしたために発生します。電話をngAfterViewInitのようにライフサイクルの下にさらに移動する必要があります。

constructor(private dynamicComponentLoader:DynamicComponentLoader, 
      private NotesService:NotesService, 
      protected sliderPanel:Sliderpanel, 
      protected commBroker:CommBroker, 
      private resolver: ComponentResolver) { 
} 

ngAfterViewInit() { 
    this.LoadComponentAsync("src/comps/app2/notes/NoteDynamic", 
     "TestComponent", this.extensionAnchor); 
} 

DynamicComponentLoaderは廃止されているので、あなたが代わりにComponentResolverを使用しなければならない最後に、：

public LoadComponentAsync(componentPath:string, componentName:string, 
          locationAnchor:ViewContainerRef) { 
    System.import(componentPath) 
     .then(fileContents => { 
      console.log(fileContents); 
      return fileContents[componentName] 
     }) 
     .then(component => { 
      this.resolver.resolveComponent(component).then(factory => { 
       locationAnchor.createComponent(factory, 0, locationAnchor.injector); 
      }); 
     }); 
} 

Answer 2

TXをすべてサポートするために、このコードはrc.1については

import { 
    Component, Inject, Injectable, provide, ComponentResolver, ComponentRef, 
    ViewContainerRef, ViewChild 
} from '@angular/core'; 
import {Sliderpanel} from "../../sliderpanel/Sliderpanel"; 
import {CommBroker} from "../../../services/CommBroker"; 
import {NotesBase} from "./NotesBase"; 
import {CountDown} from "../../countdown/CountDown"; 


@Injectable() 
class NotesService { 
    constructor(@Inject("NotesConfigValue") 
       public config:{noteDefault:string}) { 
    } 

    showConfigValue() { 
     // show the passed in param via provide("NotesConfigValue",asterisklue: {noteDefault: 'example of passing param to component via DI'}}), 
     console.log(this.config.noteDefault); 
    } 
} 


@Component({ 
    selector: 'Notes5', 
    directives: [CountDown], 
    providers: [ 
     // NotesService get's provided with a noteDefault 
     NotesService, 
     provide("NotesConfigValue", {useValue: {noteDefault: 'example of passing param to component via DI'}}), 
    ], 
    template: `<button type="button" (click)="onPrev($event)" class="btn btn-default btn-sm"> 
        <span class="fa fa-arrow-left "></span> 
       </button> 
       <hr/> 
       <small>I am notes5 component</small> 
       <span #extensionAnchor></span> 




       ` 
}) 
export class Notes5 extends NotesBase { 
    constructor(private componentResolver:ComponentResolver, private NotesService:NotesService, 
       protected sliderPanel:Sliderpanel, 
       protected commBroker:CommBroker) { 
     super(sliderPanel, commBroker); 
     NotesService.showConfigValue(); 
     this.me = this; 
     this.slideRight = 'notes4'; 


    } 

    @ViewChild('extensionAnchor', {read: ViewContainerRef}) extensionAnchor:ViewContainerRef; 

    public LoadComponentAsync(componentPath:string, componentName:string, locationAnchor:ViewContainerRef) { 
     System.import(componentPath) 
      .then(fileContents => { 
       return fileContents[componentName] 
      }) 
      .then(component => { 
       this.componentResolver.resolveComponent(component).then(factory => { 
        locationAnchor.createComponent(factory, 0, 
         locationAnchor.injector); 
       }); 
      }); 


    } 

    ngAfterViewInit() { 
     this.LoadComponentAsync("src/comps/app2/notes/NoteDynamic", "NoteDynamic", this.extensionAnchor); 
    } 
} 

Answer 3

のように動作私はng2-bootstrapのModalダイアログを使っていたので、ルートコンポーネントにviewContainerRefへの参照が含まれていなかったからです。