如何在离子按钮组件中传递禁用条件

Question

我有以下组件：import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';@Component({  selector: 'app-button',  styleUrls: ['./button.component.scss'],  template: `              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">                {{title}}              </ion-button>            `})export class ButtonComponent implements OnInit {  @Input() public title: string;  @Input() public color = 'primary';  @Input() public condition: any;  @Output() public action = new EventEmitter();  constructor() { }  ngOnInit() {  }}但是，当我将布尔值传递出去时，它不会呈现，因为我有一个布尔值，它以 false 开头并根据输入变为 true。编辑：问题是当 validDocument 变为 true 时，按钮不会再次呈现并保持禁用状态。HTML声明：<app-button title="Buscar" (action)="go()" condition="!validDocument"></app-button>

Answer 1

你有没有尝试过：

@Component({

  selector: 'app-button',

  styleUrls: ['./button.component.scss'],

  changeDetection: ChangeDetectionStrategy.OnPush, // force a component re-draw on input change

  template: `

              <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">

                {{title}}

              </ion-button>

            `

})

如果您只是将 an 传递@Input()给模板，则可以将 更改changeStratergy为OnPush。

如果您还想@Input()在组件内部使用 ，您可以添加ngOnChanges触发函数，这些函数需要在@Input()更改时触发。

https://angular.io/api/core/ChangeDetectionStrategy

OnPush 如果页面上同时有很多组件，可以大大加快您的应用程序的速度

Answer 2

怎么样

[attr.disabled]="condition ? '' : null"

而不是直接使用disabled. 那应该可以完成这项工作。

Answer 3

试试这个代码

<ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">                    

  {{title}}

</ion-button>