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

Posted 2023-02-22

【中文标题】Ionic2 组件包装在自定义组件中

【英文标题】：Ionic2 component wrap inside a custom component

【发布时间】：2017-05-02 22:10:18

【问题描述】：

简短说明：

我正在使用<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>

【参考方案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>

【讨论】：

面临同样的问题... :(

在 div 中添加你的按钮并给它高度 100%

太好了，它对我有用。请编辑您的答案。感谢您的帮助。