Angular2 viewContainerRef.createComponent正常工作

Question

我用viewContainerRef.createComponent加載動態組件到根組件（.....），但實際其追加錯了地方，

我的代碼：

----- ----- app.compoment.ts

export class AppComponent { 
    private viewContainerRef:ViewContainerRef; 
    public constructor(viewContainerRef:ViewContainerRef) { 
    this.viewContainerRef = viewContainerRef; 
    } 
} 

----- a.service.ts ------

@Injectable() 
export class ModalService { 
    private viewContainerRef:ViewContainerRef; 
    constructor(applicationRef: ApplicationRef, injector: Injector,private compiler: ComponentResolver) { 
     var classOfRootComponent = applicationRef.componentTypes[0]; 
     // this is an instance of application bootstrap component 
     var appInstance = injector.get(classOfRootComponent); 
     this.viewContainerRef= appInstance.viewContainerRef; 
    } 
    alert() {console.log(this.viewContainerRef); 
     this.compiler.resolveComponent(ModalComponent) 
     .then(
      (factory) => 
      this.viewContainerRef.createComponent(factory, 0, this.viewContainerRef.injector) 
     ).then((componentRef) => { 
       return componentRef; 
      } 
     ); 
    } 
} 

Answer 1

這是「按設計」。如果你想<custom-modal>裏面<my-app>插入添加一個目標元素進入<my-app>模板，並以此作爲目標又見討論https://github.com/angular/angular/issues/9035

。

您需要從AppComponent傳遞到ModalService像

@Component({ 
    selector: 'my-app', 
    template: `<div #target></div>` 
}) 
export class AppComponent { 
    @ViewChild('target', {read: ViewContainerRef}) viewContainerRef:ViewContainerRef; 

    constructor(private modalService:ModalService) {} 

    ngAfterViewInit() { 
    this.modalService.viewContainerRef = this.viewContainerRef; 
    } 
} 

這PR是有關類似的使用案例和您可能感興趣的https://github.com/angular/angular/pull/9393