[英]How to use an Angular2 Directive to inject DOM element?
我想創建一個 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
) { }
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.