Question

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

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

  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中的错误，但是您仍然可以创建自己的自定义组件来“隐藏”涉及使用gsScrollPos-####使用三个按钮并在页面中使用该自定义组件的修复程序。

StackBlitz demo

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

*ngIf

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

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

}

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

1 个答案:

StackBlitz demo