动态安装角度2指令 [英] Dynamically mount angular 2 directive

问题描述

我有一个简单的指令，可以根据接收到的属性将一些属性添加到给定的HTML元素中.

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>

myDirective指令只是在ngOnInit挂钩中执行了一些逻辑，并装饰了ElementRef本机元素(在本例中为按钮)，添加了属性，没有什么复杂的事情.

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);
}

问题

基于给定的逻辑(在myDirective装饰中)，我想向ElementRef在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.

如何手动安装指令以及如何将其添加到元素(ViewContainerRef)?

推荐答案

您不会动态添加或删除指令，但是如果要添加工具提示 您必须在组件模板中插入一个div才能根据变量状态激活它

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>

这篇关于动态安装角度2指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！