使用指令将组件动态添加到子元素

Question

尝试使用指令将组件动态放置到子元素。

的组件（如模板）：

@Component({ 
    selector: 'ps-tooltip', 
    template: ` 
    <div class="ps-tooltip"> 
     <div class="ps-tooltip-content"> 
     <span>{{content}}</span> 
     </div> 
    </div> 
    ` 
}) 
export class TooltipComponent { 

    @Input() 
    content: string; 

} 

指令：

import { TooltipComponent } from './tooltip.component'; 

@Directive({ 
    selector: '[ps-tooltip]', 
}) 
export class TooltipDirective implements AfterViewInit { 

    @Input('ps-tooltip') content: string; 

    private tooltip: ComponentRef<TooltipComponent>; 

    constructor(
     private viewContainerRef: ViewContainerRef, 
     private resolver: ComponentFactoryResolver, 
     private elRef: ElementRef, 
     private renderer: Renderer 
) { } 

    ngAfterViewInit() { 
    // add trigger class to el 
    this.renderer.setElementClass(this.elRef.nativeElement, 'ps-tooltip-trigger', true); // ok 

    // factory comp resolver 
    let factory = this.resolver.resolveComponentFactory(TooltipComponent); 

    // create component 
    this.tooltip = this.viewContainerRef.createComponent(factory); 
    console.log(this.tooltip); 

    // set content of the component 
    this.tooltip.instance.content = this.content as string; 
    } 
} 

的问题是，这是创建一个兄弟和我想要一个孩子（参见下文）

结果：

<a class="ps-btn ps-tooltip-trigger" ng-reflect-content="the tooltip"> 
    <span>Button</span> 
</a> 
<ps-tooltip>...</ps-tooltip> 

通缉结果：

<a class="ps-btn ps-tooltip-trigger" ng-reflect-content="the tooltip"> 
    <span>Button</span> 
    <ps-tooltip>...</ps-tooltip> 
</a> 

在此先感谢您的帮助！

Answer 1

即使动态组件插入，你仍然可以通过移动元素所需的地方subling元素：

this.elRef.nativeElement.appendChild(this.tooltip.location.nativeElement); 

Plunker Example