Angular2动态添加组件到父

我已经使用此链接来创建一个动态加载组件的指令 - link 我的问题是，我需要将组件添加到父级，而不是当前ViewContainer。有没有人有任何想法我可以做到这一点？Angular2动态添加组件到父

背景 - 我在引导模式下动态加载组件。由于我的溢出设置为隐藏，组件正在切割。所以我需要在模态之外有这个组件，以便我可以将它定位在模态上。

这里是指令

import { 
    ComponentFactory, ComponentFactoryResolver, ComponentRef, 
    Directive, ElementRef, EventEmitter, 
    HostListener, Input, Output, Renderer, 
    ViewContainerRef 
} from '@angular/core'; 

import { AutoCompleteComponent } from './auto-complete.component'; 

import { AutoComplete } from './auto-complete.model'; 
import { Contact } from './contact.model'; 

@Directive({ 
    selector: '[AutoComplete]' 
}) 
export class AutoCompleteDirective { 

    autoCompleteComponentRef: ComponentRef<AutoCompleteComponent>; 

    @Output() onContactSelected = new EventEmitter<Contact>(); 

    constructor(
     private el: ElementRef, 
     private viewContainer: ViewContainerRef, 
     private componentFactoryResolver: ComponentFactoryResolver, 
     private renderer: Renderer 
    ) { 
    } 

    @HostListener('keyup') onKeyUp() { 
     this.search(); 
    } 

    private search() 
    { 
     if (this.autoCompleteComponentRef == undefined) { 
      let autoCompleteComponentFactory = this.componentFactoryResolver.resolveComponentFactory(AutoCompleteComponent); 
      this.autoCompleteComponentRef = this.viewContainer.createComponent(autoCompleteComponentFactory); 


      this.autoCompleteComponentRef.instance.onBusinessContactSelected.subscribe((x) => { 
       this.onContactSelected.emit(x); 
      }) 
     } 
     this.autoCompleteComponentRef.instance.search(this.forename, this.surname); 

    } 

}

来源

2016-12-01 jagdipa

你可以提供一个plunker与你的模态？ – yurzui

基本上你想把它添加到目标 – Demodave

我有同样的困惑的是（这是动态加载）成分其中我想用它作为容器或父组件之后总是添加的代码。这是设计的错误还是功能？

来源

2016-12-15 02:59:31 Rekoolno

我发现了一个使用@ViewChild而不是在构造函数中注入的viewContainer的例子。在这个例子中，父级有一个名为'target'（div元素）的视图子元素。目标被用作锚点。你可以在你的组件之后附加你的组件，这样你的组件将被添加到“在”父组件中。希望它有帮助。链接：http：//plnkr.co/edit/UGzoPTCHlXKWrn4p8gd1 – Rekoolno

Angular2动态添加组件到父

回答

相关问题