javascript - page - Angular 2 agregar condicionalmente directivas de atributos

router events angular 6

Question

He visto dos preguntas aquí sobre cómo agregar y eliminar atributos de forma condicional en un elemento ( ¿Es posible mostrar atributos de elementos de forma condicional mediante Angular2? ) Pero mi pregunta es si es posible agregar y eliminar directivas de atributos ? Soy capaz de agregar y eliminar el atributo, pero Angular no "compila" el atributo como una directiva de atributo, pero el atributo simplemente se queda ahí sin hacer nada. Aquí hay un ejemplo de 2 etiquetas:

El primero es el que trato de aplicar condicionalmente la directiva de atributos y el segundo lo tiene todo el tiempo.

Aquí está el gif:

Aquí es cómo estoy aplicando el atributo (¿tal vez hay una forma diferente de aplicar la directiva de atributos?)

<h1 [attr.colored]="check ? '''': null">Testing something</h1>

Y aquí está la directiva:

import {Directive, ElementRef} from ''@angular/core''
@Directive({
    selector: ''[colored]'',
    host: {
        ''(mouseenter)'': ''onMouseEnter()'',
        ''(mouseleave)'': ''onMouseLeave()''
    }
})

export class colorDirective {
    constructor(private el: ElementRef) {
    }
    onMouseEnter() { this.highlight("yellow"); }
    onMouseLeave() { this.highlight(null); }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

Edit: hay respuestas par pero son para AngularJS (1)

Answer 1

Entonces, antes de que puedas tener un componente recompilado, es propio $ scope con $ compile () pero no está en angular2. Puede compilar en tiempo de ejecución un NUEVO componente, aquí hay un buen SO con algunas formas con dynamicComponentLoader : Equivalente a $ compile en Angular 2

Y otro: Angular 2 equivalente de ng-bind-html, $ sce.trustAsHTML () y $ compile?

La pregunta que tengo es cuál es el caso de uso de las directivas de conmutación. No puedo pensar por qué lo haría, pero tengo curiosidad por saber cuál es su necesidad ... Para la mayoría de las cosas, ngSf, ngSwitch, etc. funcionan para mí mientras alterno ...

Answer 2

Eso no es compatible. Las directivas solo se aplican cuando el HTML estático coincide con el selector.

Answer 3

Podrías pasarle una bandera a la directiva.

En la directiva:

ngAfterViewInit()
{
  let tooltip = this.tooltip instanceof Object ? this.tooltip : {disabled: this.tooltip};
  if (!tooltip.disabled) {
    //DO STUFF
  }
}

En DOM:

<span [tooltip]="{disabled: true}"></span>