我想创建一个Angular2指令来在用户将鼠标悬停在列表项上时显示工具提示。
Angular2文档看起来像这样：
@Directive({ selector: '[myUnless]' })
export class UnlessDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { }
this.viewContainer.createEmbeddedView(this.templateRef);
}
}
如何创建一个新模板并注入到viewContainer中？例如，像这样的模板：
<div class="tooltip">Some inner tooltip text</div>
我已经看到了使用动态组件加载程序的示例，但不确定如何正确运行。
@Directive({ selector: '[tooltip]' })
export class TooltipDirective {
@HostListener('mouseenter') onMouseenter() {
const factory = this.resolver.resolveComponentFactory(ExampleCompoent);
this.viewContainerRef.createComponent(factory);
}
constructor(
private viewContainerRef: ViewContainerRef,
private resolver: ComponentFactoryResolver
) { }
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句