Ionic2 组件包装在自定义组件中

Question

简短说明：

我正在使用<ion-item-option></ion-item-option>。

当我根据 ionic2 文档创建组件时，它工作正常。

但我想将 ionic 组件包装到我的自定义组件中，并具有其他功能，因为在我当前的项目中，到处都使用相同的组件。所以它对我来说是个问题。

仅在 IOS 设备中存在问题。 ios screenshots

例如： 我创建了新组件<nl-edit-button></nl-edit-button>

   @Component({
      selector: 'nl-edit-button',
      template: `
        <button ion-button color="edit" (click)="openEditModal(complaint)" *ngIf="complaint.statusId != 6 && complaint.statusId != 4">
          <ion-icon name="md-create"></ion-icon>
          Edit
        </button>
      `
    })

它在 android 设备中按预期工作，但在 ios 中没有。

我正在使用这样的自定义组件：

<ion-item-options side="right">
  <nl-edit-button [complaint]="complaint" (edit)="openEditModal($event)">    </nl-edit-button>
</ion-item-options>

Answer 1

我之前也遇到过同样的问题，尝试在样式标签中添加高度。 它对我有用。

@Component({
      selector: 'nl-edit-button',
      template: `
        <div style="height:100%">
        <button ion-button color="edit" (click)="openEditModal(complaint)" *ngIf="complaint.statusId != 6 && complaint.statusId != 4">
          <ion-icon name="md-create"></ion-icon>
          Edit
        </button>
        </div>
      `
    })


    <ion-item-options side="right">
      <nl-edit-button style="height:100%" [complaint]="complaint" (edit)="openEditModal($event)">    </nl-edit-button>
    </ion-item-options>