使用指令将组件动态添加到子元素 [英] Add a component dynamically to a child element using a directive
本文介绍了使用指令将组件动态添加到子元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试使用指令将组件动态放置到子元素.
组件(作为模板):
@Component({选择器:'ps-工具提示',模板:`<div class="ps-tooltip"><div class="ps-tooltip-content"><span>{{content}}</span>
`})导出类 TooltipComponent {@输入()内容:字符串;}
指令:
import { TooltipComponent } from './tooltip.component';@指示({选择器:'[ps-工具提示]',})导出类 TooltipDirective 实现 AfterViewInit {@Input('ps-tooltip') 内容:字符串;私有工具提示:ComponentRef;构造函数(私有 viewContainerRef: ViewContainerRef,私有解析器:ComponentFactoryResolver,私有 elRef: ElementRef,私有渲染器:Renderer) { }ngAfterViewInit() {//给el添加触发器类this.renderer.setElementClass(this.elRef.nativeElement, 'ps-tooltip-trigger', true);//好的//工厂补偿解析器让工厂 = this.resolver.resolveComponentFactory(TooltipComponent);//创建组件this.tooltip = this.viewContainerRef.createComponent(工厂);控制台日志(this.tooltip);//设置组件内容this.tooltip.instance.content = this.content 作为字符串;}}
问题是这是在创建一个兄弟姐妹,而我想要一个孩子(见下文)
结果:
<span>按钮</span></a><ps-tooltip>...</ps-tooltip>
想要的结果:
<span>按钮</span><ps-tooltip>...</ps-tooltip></a>
预先感谢您的帮助!
解决方案
即使动态组件作为 subling 元素插入,您仍然可以使用以下方法将元素移动到所需位置:
this.elRef.nativeElement.appendChild(this.tooltip.location.nativeElement);
Trying to place a component dynamically to a child element, using a directive.
The component (as template):
@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;
}
the directive:
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;
}
}
The problem is that this is creating a sibling and I want a child (see bellow)
result:
<a class="ps-btn ps-tooltip-trigger" ng-reflect-content="the tooltip">
<span>Button</span>
</a>
<ps-tooltip>...</ps-tooltip>
wanted result:
<a class="ps-btn ps-tooltip-trigger" ng-reflect-content="the tooltip">
<span>Button</span>
<ps-tooltip>...</ps-tooltip>
</a>
Thanks in advance for your help!
解决方案
Even dynamic component is inserted as subling element you can still move element to desired place by using:
this.elRef.nativeElement.appendChild(this.tooltip.location.nativeElement);
这篇关于使用指令将组件动态添加到子元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文