在属性指令中使用 DoCheck

Question

我创建了一个简单的应用程序，使用 ngFor 从数组创建一系列按钮。单击按钮时，它的值被推送到第二个数组。

我有一个属性指令 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);
      }
  }
}

Answer 1

您可以绑定到 button 的 [disabled] 属性。在您的控制器中创建一个函数 isButtonDisabled(button) 从模板中传递项目。

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

在函数内部，检查项目是否已经被推入第二个数组。

如果是，return true 按钮将被禁用。

Answer 2

而不是使用 directive 为什么不在您的组件中执行检入 addItem() 方法。

DoCheck() 方法的用途应该有限，因为每次更改检测周期运行时它都会 运行。所以你必须小心使用它。

最好使用 OnChanges() 而不是 DoCheck() 作为前运行仅当 input 属性发生变化时。

你可以试试：

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()。

在属性指令中使用 DoCheck

Using DoCheck in attribute directive

angular2-directives

angular