如何动态添加(注入)指令到主机?
我有一个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) */
}
}
Run Code Online (Sandbox Code Playgroud)
通过主机我的意思是具有myTooltip指令的元素:
<span my-tooltip="tooltip hint">Click here</span>
Run Code Online (Sandbox Code Playgroud)
结果不会在html之上改变,但是在mouseenter上它会有span中的md-tooltip指令.
顺便说一句,我使用包装器而不是直接使用md-tooltip的原因是我想稍后修改显示延迟,隐藏延迟并以其他方式定制材料工具提示的行为.
编辑显然目前不支持动态添加指令:(我认为这个问题仍应存在,以防材料团队更新