如何将 Ionic 3 按钮设置为动态清除或轮廓？

Question

我在 Ionic 3 应用程序中有一些按钮，我希望能够将它们动态设置为轮廓或清除。我可以自己绑定 clear 并且有效（下面的案例 1）。我可以自己绑定 outline （下面的案例 2）。但是当我尝试同时绑定 clear 和 outline 时，outline 的值似乎被忽略了。我在最后一行显示了我想要的输出。

我将此作为我页面 class 的一部分：

  buttons = [
          {clear: true, outline: false, name: 'Clear'},
          {clear: false, outline: true, name: 'Outline'},
          {clear: false, outline: false, name: 'Default'},
        ];

而我的 HTML 是：

<ion-content padding>
  <ion-row>
    <ion-col col-6>
      <ion-label>
        1. Binding clear attribute:
      </ion-label>
    </ion-col>
    <ion-col col-2 *ngFor="let button of buttons">
      <button ion-button
        [clear]="button.clear">
        {{button.name}}
      </button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>
      <ion-label>
        2. Binding outline attribute:
      </ion-label>
    </ion-col>
    <ion-col col-2 *ngFor="let button of buttons">
      <button ion-button
        [outline]="button.outline">
        {{button.name}}
      </button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>
      <ion-label>
        3. Binding clear and outline attributes:
      </ion-label>
    </ion-col>
    <ion-col col-2 *ngFor="let button of buttons">
      <button ion-button
        [outline]="button.outline"
        [clear]="button.clear">
        {{button.name}}
      </button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>
      <ion-label>
        4. Desired output:
      </ion-label>
    </ion-col>
    <ion-col col-2>
      <button ion-button clear>Clear</button>
    </ion-col>
    <ion-col col-2>
      <button ion-button outline>Outline</button>
    </ion-col>
    <ion-col col-2>
      <button ion-button>Default</button>
    </ion-col>
  </ion-row>
</ion-content>

这是页面的效果图：

还有一个带有完整代码的 Plunker： https://embed.plnkr.co/eFBFc9/

我不能同时绑定到 clear 和 outline 有什么原因吗？

我意识到我可以使用 ngIf 最终达到相同的结果：

<button ion-button *ngIf="button.clear" clear>{{button.name}}</button>
<button ion-button *ngIf="button.outline" outline>{{button.name}}</button>
<button ion-button *ngIf="!button.clear && !button.outline">{{button.name}}</button>

不过好像一个按钮绑定多个属性会更简洁。我怎样才能做到这一点？

我也尝试用 attr.clear 和 attr.outline 代替 clear 和 outline，但也没有成功。

Answer 1

这看起来像是 Ionic 中的错误，但您仍然可以创建自己的自定义组件来 "hide" 涉及使用三个按钮和 *ngIf 的修复，并在您的页面中使用该自定义组件.

StackBlitz demo

您的自定义组件可能如下所示：

import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'custom-button',
    template: `
    <button (click)="onClick()" ion-button *ngIf="clear" clear>{{name}}</button>
    <button (click)="onClick()" ion-button *ngIf="outline" outline>{{name}}</button>
    <button (click)="onClick()" ion-button *ngIf="!clear && !outline">{{name}}</button>
  `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomButtonComponent {

  @Input() 
  public clear: boolean = false;

  @Input() 
  public outline: boolean = false;

  @Input() 
  public name: string;

  @Output() 
  customClick: EventEmitter<void> = new EventEmitter<void>();

  public onClick(): void {
    this.customClick.next();
  }

}

然后您将在您的页面中像这样使用它：

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <h2>Welcome to Ionic!</h2>

      <ion-row>
        <ion-col col-6>
          <ion-label>
            Using the custom component:
          </ion-label>
        </ion-col>
        <ion-col col-2 *ngFor="let button of buttons">

          <custom-button
            [clear]="button.clear ? true : null"       
            [outline]="button.outline ? true : null"
            [name]="button.name"
            (customClick)="onClicked()">
          </custom-button>

        </ion-col>
      </ion-row>

    </ion-content>
  `
})
export class HomePage {

  public buttons: Array<any> = [
    { clear: true, outline: false, name: 'Clear' },
    { clear: false, outline: true, name: 'Outline' },
    { clear: false, outline: false, name: 'Default' }
  ];

  public onClicked() {
    console.log('Clicked!');
  }

}

如何将 Ionic 3 按钮设置为动态清除或轮廓？

How can Ionic 3 buttons be set to clear or outline dynamically?

typescript

ionic-framework

ionic2

ionic3

angular

StackBlitz demo