Question

我使用的是Anngular2，我有以下指令：

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);
    } }

我希望有条件地设置它的值如下：

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

标签的呈现方式如下：

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

问题是该指令不起作用（不更改类元素）。但是当我直接添加指令而不使用[attr.ngBlink]时，它可以正常工作：

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

Answer 1

[attr.someAttribute]语法仅适用于元素属性，而不适用于组件/指令@Input()。您应该直接使用[ngBlink]。

有条件地设置指令的输入不起作用

1 个答案: