지시문을 사용하여 자식 요소에 동적으로 구성 요소 추가

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