2017-04-06 3 views
0

ich Anngular2 verwende, und ich habe die folgende Anweisung:die Eingabe einer Richtlinie bedingt nicht funktioniert

import { Directive, ElementRef, Input, Renderer, OnInit } from '@angular/core'; 

@Directive({ selector: '[ngBlink]' }) 

export class BlinkDirective implements OnInit { 
    @Input('ngBlink') ngenableblink: string = ""; 
    private directiveTimeout; 

    constructor(private el: ElementRef, private renderer: Renderer) { 

    } 

    private ApplyBlinking() { 
     if (this.ngenableblink == "true") { 
      if (this.el.nativeElement.className.indexOf("blinkIn") >= 0) { 
       this.renderer.setElementClass(this.el.nativeElement, "blinkIn", false); // remove class (blinkIn) 
       this.renderer.setElementClass(this.el.nativeElement, "blinkOut", true); // add class (blinkOut) 
      } else if (this.el.nativeElement.className.indexOf("blinkOut") >= 0) { 
       this.renderer.setElementClass(this.el.nativeElement, "blinkOut", false); // remove class (blinkOut) 
       this.renderer.setElementClass(this.el.nativeElement, "blinkIn", true); // add class (blinkIn) 
      } 
      else { 
       this.renderer.setElementClass(this.el.nativeElement, "blinkOut", true); //Initially add (blinkOut) class 
      } 
     } 
     else { 
      clearInterval(this.directiveTimeout); 
     } 
    } 

    ngOnInit() { 
     this.directiveTimeout = setInterval(() => this.ApplyBlinking(), 500); 
    } } 

und ich möchte bedingt sein Wert einstellen wie folgt:

<label class="input-title" [attr.ngBlink]="blinkTitle() ? true : false">Enter Key</label> 

Die Label wird wie folgt wiedergegeben:

<label _ngcontent-qjd-8="" class="input-title" ngblink="true">Enter Key</label> 

das Problem ist, dass die Richtlinie nicht funktioniert (ändert das Klassenelement nicht). Aber wenn ich die Richtlinie direkt ohne die Verwendung von [attr.ngBlink] hinzufügen, dann funktioniert es gut:

<label _ngcontent-fif-8="" class="input-title blinkIn" ngblink="true">Enter Key</label> 
+0

erhalten Sie irgendwelche Fehler? – Aravind

+1

Warum verwenden Sie '[attr.ngBlink]' anstelle von '[ngBlink]'? – YounesM

+0

@Aravind nein Ich habe keine Fehler – Ala

Antwort

2

die [attr.someAttribute] Syntax ist nur für Elementattribute, nicht components/Richtlinien @Input(). Sie sollten [ngBlink] direkt verwenden.

Verwandte Themen