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

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({&nbsp; selector: 'app-button',&nbsp; styleUrls: ['./button.component.scss'],&nbsp; changeDetection: ChangeDetectionStrategy.OnPush, // force a component re-draw on input change&nbsp; template: `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{title}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ion-button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `})如果您只是将 an 传递@Input()给模板，则可以将 更改changeStratergy为OnPush。如果您还想@Input()在组件内部使用 ，您可以添加ngOnChanges触发函数，这些函数需要在@Input()更改时触发。https://angular.io/api/core/ChangeDetectionStrategyOnPush 如果页面上同时有很多组件，可以大大加快您的应用程序的速度

Answer 2

怎么样[attr.disabled]="condition&nbsp;?&nbsp;''&nbsp;:&nbsp;null"而不是直接使用disabled.&nbsp;那应该可以完成这项工作。

Answer 3

试试这个代码<ion-button color="{{color}}" (click)="action.emit(null)" [disabled]="condition">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; {{title}}</ion-button>