Winkel 2: eine Komponente dynamisch zu laden versuchen, immer: Typeerror: kann Eigenschaft lesen ‚parentInjector‘

Question

Ich versuche, eine Komponente dynamisch mit angular2 zu laden und es mit erroring aus:

AUSNAHME: Fehler: Uncaught (in Versprechen): Typeerror: kann nicht lesen Eigenschaft 'parentInjector' undefinierter

dies ist der Code:

@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) 
      }); 
    } 
} 

irgendwelche Ideen?

Grüße

Sean

Answer 1

Ihre ursprüngliche Fehler durch eine Diskrepanz zwischen der tatsächlichen Klassennamen und den Namen der Komponente verursacht wird, die Sie dynamicall machen versuchen: IE, wenn Sie TestComponent die Klasse muss referenzieren auch genannt TestComponent.

Ihr aktueller Fehler TypeError: Cannot read property 'parentInjector' wird verursacht, indem versucht wird, Inhalt in das @ViewChild Element zu laden, bevor die Ansicht gerendert wird, da Sie es in dem Konstruktor aufrufen. Sie müssen Ihren Anruf weiter in den Lebenszyklus verschieben, z. B. 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); 
} 

Da schließlich DynamicComponentLoader veraltet ist, sollten Sie ComponentResolver stattdessen werden:

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 alle für die Unterstützung dieser Code als der rc.1 arbeitet

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

Für Ich war es, weil ich den Modal-Dialog von ng2-bootstrap benutzte und in der Root-Komponente keinen Verweis auf viewContainerRef enthielt.