Question

如何防止通过角度中的父组件单击已禁用的按钮？

2018-06-14

2981

angular button components disabled-input

我有一个通用组件 app-button ，其中包含一个按钮元素。

按钮组件 html

<button [type]="type" [disabled]="isLoading || !!disabled">
    <ng-content></ng-content>
</button>

按钮组件 ts

@Component({
  selector: 'app-button',
  templateUrl: 'views/button.component.html',
  styleUrls: ['styles/button.component.scss']
})
export class ButtonComponent implements OnInit {
  @Input() type: string;
  @Input() color: string;
  @Input() disabled: boolean;
  @Input() class: string;
  isLoading: boolean;
  constructor() {
    this.type = "submit";
  }
}

我向组件添加了 (click)，它工作正常。但是当我添加 disabled 属性时，它会禁用按钮，但当您单击内容时 (click) 仍然有效。

<app-button (click)="signIn()" [disabled]="true">
    <span>Signin</span>
</app-button>

Answer 1

我认为您的问题是您正在禁用子组件，而父组件中有 click 事件

解决方案可能是将您的 (click)="signIn()" 移动到您的子组件，它将被禁用并添加一个 @Output 装饰器以接收来自子组件的 回调

子组件html

<button [type]="type" [disabled]="isLoading || !!disabled" (click)="signIn()">
    <ng-content></ng-content>
</button>

子组件ts

@Component({
  selector: 'app-button',
  templateUrl: 'views/button.component.html',
  styleUrls: ['styles/button.component.scss']
})
export class ButtonComponent implements OnInit {
  @Input() type: string;
  @Input() color: string;
  @Input() disabled: boolean;
  @Input() class: string;
  @Output() callback = new EventEmitter();
  isLoading: boolean;
  constructor() {
    this.type = "submit";
  }

  signIn(){
     this.callback.emit();
  }

}

父组件html

<app-button (callback)="signIn()" [disabled]="true">
    <span>Signin</span>
</app-button>

演示StackBlitz