ng-bind-html angular 6

¿Cómo agregar dinámicamente una directiva?

Question

¿Cómo agregar ( inyectar ) dinámicamente una directiva en el host?

Tengo una directiva myTooltip y me gustaría agregar la directiva mdTooltip a su host. He intentado setAttribute() de ElementRef.nativeElement , pero no crea la directiva 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) */
  }
}

Por host me refiero al elemento que tiene la directiva myTooltip:

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

El resultado no cambiaría por encima de html, pero en mouseenter tendría la directiva md-tooltip en span.

Por cierto, la razón por la que estoy usando un contenedor y no directamente md-tooltip es que quiero modificar más tarde el retraso de visualización, el retraso de ocultación y personalizar el comportamiento de la información sobre herramientas de material también por otros medios.

Editar Aparentemente, agregar directivas dinámicamente no es compatible actualmente :( Creo que esta pregunta aún debería estar aquí en caso de que el equipo material actualice

Answer 1

Esa es una característica que estamos pidiendo en angular ... lea esto: https://github.com/angular/angular/issues/8785

Una forma rápida y sucia de hacerlo es usar:

Tengo una directiva llamada myHilite (para resaltar texto), también tengo un componente llamado MainComponent.ts . En MainComponent.ts agregué esta línea de código ...

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

Si su directiva requiere parámetros ...

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

Es posible que su directiva necesite ejecutar código en uno de sus enlaces de ciclo de vida, llame manualmente al método de enlace de ciclo de vida de la directiva en el método de enlace de ciclo de vida del componente principal como este ...

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

    ngOnInit(){
        this.myHiliteDirective.ngOnInit();
    }
}