如何动态添加指令？

Posted 2023-02-22

【中文标题】如何动态添加指令？

【英文标题】：How to dynamically add a directive?

【发布时间】：2017-05-08 23:11:05

【问题描述】：

如何在主机中动态添加（inject）指令？

我有一个 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 的原因是我想稍后修改显示延迟、隐藏延迟并以其他方式自定义材质工具提示的行为。

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

【问题讨论】：

你试过constructor(private tt:myTooltip) console.log(tt); 吗？不确定这是否有效。究竟什么是“主机”？ <span> 看起来不像一个组件。

当您在构造函数中请求提供者时，您正在谈论“注入”，但在这种情况下，我不是那个意思。我在这里注入的意思是有可能将指令插入到已经渲染的 dom 元素中，在这种情况下是 span。你可以像<span md-tooltip="tooltip hint">Click here</span> 那样在 html 中执行此操作，但现在我正在寻找一种编程方式。

这没有命名或与注入有关。目前不支持动态添加指令，只能动态添加组件。

是的，对于误导性命名，我们深表歉意。我将标题更改为更具描述性的内容。我还阅读了一些关于动态添加组件的内容，但这不适用于动态添加指令，感谢您提供的信息。

【参考方案1】：

这是我们在 Angular 中要求的功能...阅读：https://github.com/angular/angular/issues/8785

一种快速而肮脏的方法是使用：

我有一个名为 myHilite 的指令（用于突出显示文本），我还有一个名为 MainComponent.ts 的组件。在MainComponent.ts我添加了这行代码...

export class MainComponent 
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite();
 

如果你的指令需要参数...

export class MainComponent 
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite(this.elementRef);

您的指令可能需要在其生命周期钩子之一中执行代码，像这样在父组件的生命周期钩子方法中手动调用指令的生命周期钩子方法...

export class MainComponent 
    //...code...

    ngOnInit()
        this.myHiliteDirective.ngOnInit();
    

【讨论】：

@btinoco 我要澄清的另一件事是@HostBinding(attr.myDirective) 在子组件中，ngOnInit() this.myHilite.ngOnInit(); 在父组件中。我说的对吗？

@btinoco 能否请您将myHilite 更改为myHiliteDirective 或myDirective，以免其他读者对此感到困惑。

我根据您的评论编辑了答案，WasiF，但有人将其恢复为原始解决方案。对不起。

这对我很有效。但是，有没有办法在之后删除指令？基本上，我希望能够动态应用或删除指令。

@FelipeCenteno 抱歉我没试过