Angular 2 bedingt hinzufügen Attribut-Direktiven

Question

Ich habe zwei Fragen hier zu sehen, wie Attribute auf einem Element bedingt hinzufügen und entfernen (Is it possible to conditionally display element attributes using Angular2?) aber meine Frage ist, ob es möglich ist hinzuzufügen und zu entfernen Attribut-Direktiven? Ich bin in der Lage, das Attribut hinzuzufügen und zu entfernen, aber Angular "kompiliert" das Attribut nicht als Attribut-Direktive, aber das Attribut sitzt einfach da und tut nichts. Hier ist ein Beispiel für 2 Tags:

Die erste ist die, die ich versuche, die Attribut-Anweisung bedingt anzuwenden, und die zweite hat es die ganze Zeit.

Hier ist der gif ist:

Hier ist, wie ich das Attribut beantrage (vielleicht gibt es eine andere Art und Weise Attribut Richtlinie anzuwenden?)

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

Und hier ist die Richtlinie:

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: Es gibt einige Antworten, aber sie sind für AngularJS (1)

Answer 1

Das wird nicht unterstützt. Anweisungen werden nur angewendet, wenn statisches HTML mit dem Selektor übereinstimmt.

Answer 2

Bevor Sie also eine Komponente kompilieren können, kompilieren Sie ihren eigenen $ scope mit $ compile(), aber nicht in angular2. Sie können eine neue Komponente zur Laufzeit kompilieren, hier sind ein guter SO mit einem paar Möglichkeiten, um mit dynamicComponentLoader: Equivalent of $compile in Angular 2

und einem anderen: Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

Die Frage, die ich habe, ist, was die Richtlinien Anwendungsfall von Makeln ist? Ich kann nicht glauben, warum sollte ich, aber ich bin gespannt, was Sie brauchen, ist .. Für die meisten Dinge ngIf, ngSwitch usw. für mich arbeiten, während Makeln ..

Answer 3

Sie könnten eine Flagge der Richtlinie passieren

in der Richtlinie:

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

In DOM:

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