在屬性指令中使用DoCheck

我創建了一個簡單的應用程序，使用ngFor從數組中創建一系列按鈕。當一個按鈕被點擊時，它的值被推到第二個數組。在屬性指令中使用DoCheck

我有一個屬性指令disable，它使用DoCheck()監聽數組的更改，並禁用其數組已存在的任何按鈕，以防止它被多次添加。

這一切工作，但有沒有更好的方法？ Angular 2網站在使用DoCheck()時建議小心。

查看

<ul> 
    <li *ngFor="let myitem of myitems">{{ myitem }} 
    <a href="#" (click)="deleteItem(myitem)"> x</a> 
    </li> 
</ul> 
<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems">{{item}}</button>

屬性指令

@Directive({ 
    selector: '[disable]' 
}) 
export class DisableDirective implements DoCheck { 
    @Input('disable') myitems : string[]; 

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

    ngDoCheck() { 
     if(this.myitems.find(item => item === this.el.nativeElement.innerText)) { 
     this.renderer.setElementProperty(this.el.nativeElement, 'disabled', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', true); 
     } else { 
     this.renderer.setElementProperty(this.el.nativeElement, 'disabled', false); 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', false); 
     } 
    } 
}

來源

2016-09-23 user1405195

您可以綁定到button的[disabled]財產。在您的控制器isButtonDisabled(button)中創建一個功能，從模板中傳遞項目。

<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems" [disabled]="isButtonDisabled(item)">{{item}}</button>

在函數內部，檢查項目已被推入第二陣列。

如果是，return true這樣按鈕被禁用。

來源

2016-09-23 10:25:16

而不是使用directive爲什麼不在您的組件中執行addItem()方法中的檢查。

DoCheck()方法應該有有限的使用，因爲它將每次運行運行更改檢測週期。所以你必須小心使用它。

由於前者只有在input屬性發生更改時纔會運行，因此優先使用OnChanges()而不是DoCheck()。

你可以試試：

export class MyComponent implents OnChanges{ 

    addItem(item) { 

    if(this.myitems.find(item => item === this.el.nativeElement.innerText)) { 
      this.renderer.setElementProperty(this.el.nativeElement, 'disabled', true); 
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', true); 
      } 
else { 
      this.renderer.setElementProperty(this.el.nativeElement, 'disabled', false); 
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', false); 
      } 
     } 
    } 

ngOnChanges() { 
this.addItem(item); 
}

你的情況，你可以跳過使用directive。

如果真的想要使用directive，則將所有邏輯從DoCheck()轉移到OnChanges()。

來源

2016-09-23 10:31:15 candidJ

在屬性指令中使用DoCheck

回答

相關問題