2016-08-30 3 views
1

は、私は次のディレクティブを作ったときにリフレッシュする必要がありますisDesableを:指令は入力変化

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core'; 
import { Observable, Subscription } from 'rxjs/Rx'; 

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

export class DisableDirective implements OnInit { 
    private el: HTMLElement; 

    @Input('myDisabled') isDisable: boolean; 

    constructor(el: ElementRef) { this.el = el.nativeElement;} 

    ngOnInit() { 
     this.disable(); 
    } 

    private disable() { 
     this.isDisable ? this.el.style.opacity = '0.65' : this.el.style.opacity = '1'; 
    } 
} 

このディレクティブは、入力に依存して、ボタンの不透明度を設定します。この設定は、入力が変更されたときに更新する必要がありますが、その方法はわかりません。

私はこのように、このディレクティブを使用します。

<button class="btn" [myDisabled]="!sharedDetails.isEnabled">A button !</button> 

答えて

0

二つの方法

_isDisabled: boolean; 
@Input('myDisabled') 
set isDisable(value: boolean) { 
    this._isDisabled = value; 
    this.disable(); 
} 

または

// called every time after inputs are updated 
// check the `changes` parameter for details if you have more than one input 
ngOnChanges(changes) { 
    this.disable();  
} 
+1

は完璧に動作し、第二の方法を試してみましたが、ちょうどOnChangesをインポートする必要があります。ありがとう! –

+1

最初のやり方も試してみましたが、私はセッターの ":void"を取り除く必要がありました –

+0

フィードバック(TSを積極的に使っていない)に感謝します。 –