угловой 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 визуализации: IE, если вы ссылаетесь TestComponent класс должен также можно назвать 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

ТХ все для поддержки, этот код работает в 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

Для меня это потому, что я использовал диалог Modal от ng2-bootstrap, и я не включил ссылку на viewContainerRef в корневой компонент.