相关疑难解决方法(0)

如何动态添加(注入)指令到主机？

我有一个myTooltip指令,我想将mdTooltip指令添加到它的主机.我试过setAttribute()了ElementRef.nativeElement,但它没有创建mdTooltip指令.

mytooltip.directive.ts:

@Directive({
  selector: '[my-tooltip]',
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (host) */
  }
}

通过主机我的意思是具有myTooltip指令的元素:

<span my-tooltip="tooltip hint">Click here</span>

结果不会在html之上改变,但是在mouseenter上它会有span中的md-tooltip指令.

顺便说一句,我使用包装器而不是直接使用md-tooltip的原因是我想稍后修改显示延迟,隐藏延迟并以其他方式定制材料工具提示的行为.

编辑显然目前不支持动态添加指令:(我认为这个问题仍应存在,以防材料团队更新

我遇到了以下Plunker来动态添加和删除组件.根据以上链接和许多其他SO帖子,我知道如何访问输入和输出属性:

this.compRef.instance.someProperty = 'someValue';
this.compRef.instance.someOutput.subscribe(val => doSomething()); 

而且我还有一个指令"appFont".

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFont]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.font = 'Calibri';
    }
}

如何将这个"appFont"指令添加到新动态创建的组件中？

有什么办法可以从typescript向ElementRef添加指令？（或愚弄角度添加了指令）？

上下文

我有一个简单的指令,根据接收的属性为给定的HTML元素添加一些属性.

<button class="btn btn-blue x-large" [myDirective]="{ some_json_data: true }">
    Unfold
</button>

该myDirective指令只是在ngOnInit钩子中做了一些逻辑并装饰了ElementRef原生元素(在这种情况下是按钮)添加属性,没有什么复杂的.

ngOnInit(): void {
  const el: Element = this.element.nativeElement;
  this.decorate(el, this.myDirective);
}

问题

基于给定的逻辑(在myDirective装饰中)我想向ElementRefat 引用的元素添加工具提示(这是另一个指令)myDirective.

如何手动挂载指令以及如何将其添加到元素(ViewContainerRef)？