angular – 如何在Ionic 2/3中编写自定义组件而不会丢失准备好的

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

@Component({
  selector: 'deletableItem',template: `
    <ion-checkbox item-right></ion-checkbox>
  `
})
export class DeletableItem {
  constructor() {}
}

并在一些html视图中使用它：

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <deletableItem></deletableItem>
    </ion-item>
  </ion-list>
</ion-content>

看起来比仅仅把它放在父的组件视图中更糟糕,如下所示：

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <ion-checkbox item-right></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>

这一切都是因为将此组件的html代码角度包装成html标签.所以我们失去了离子成分的强度(准备好了css).请不要建议属性组件分配如下：

<ion-checkbox item-right deletableItem></ion-checkbox>

因为这只是一个简单的例子.

在不丢失准备好的CSS的情况下,用离子组件编写自定义组件的最佳方法是什么？