javascript - 如何在 ionic 按钮组件中传递禁用条件

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() {
  }
}

但是当我从中传递 bool 值时它不会呈现，因为我有一个 bool 值开始为假并根据输入变为真。

编辑:问题是当 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>
            `
})

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

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

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

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