问题描述
限时送ChatGPT账号..上下文
我有一个简单的指令,可以根据收到的属性向给定的 HTML 元素添加一些属性.
<button class="btn btn-blue x-large" [myDirective]="{ some_json_data: true }">展开按钮>
myDirective
指令只是在 ngOnInit
钩子中执行一些逻辑并装饰 ElementRef
原生元素(在本例中为按钮)添加属性,没什么复杂的.
ngOnInit(): void {const el: 元素 = this.element.nativeElement;this.decorate(el, this.myDirective);}
问题
基于给定的逻辑(在 myDirective
装饰中),我想在 myDirective 处向
ElementRef
引用的元素添加工具提示(这是另一个指令)代码>.
如何手动挂载指令以及如何将其添加到元素 (ViewContainerRef)?
解决方案您不会动态添加或删除指令,但如果您想添加工具提示您必须在组件模板中插入一个 div 以根据变量状态激活它
<div [hidden]="tooltipnotshown"类=工具提示">等等等等……
Context
I have a simple directive that add some attributes to a given HTML element based on received attributes.
<button class="btn btn-blue x-large" [myDirective]="{ some_json_data: true }">
Unfold
</button>
The myDirective
directive just does some logic in the ngOnInit
hook and decorates the ElementRef
native element (in this case the button) adding attributes, nothing complicated.
ngOnInit(): void {
const el: Element = this.element.nativeElement;
this.decorate(el, this.myDirective);
}
Problem
Based on a given logic (in myDirective
decoration) I want to add a tooltip (which is another directive) to the element referenced by ElementRef
at myDirective
.
How do I mount a directive manually and how do I add it to an element (ViewContainerRef)?
解决方案You do not add or remove directives dynamically, but if you want to add a tooltip you have to insert a div in your component template that activates it depending on a variable status
<div [hidden]="tooltipnotshown"
class="tooltip">
blah blah or whatever ...
</div>
这篇关于动态安装 angular 2 指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论