小编Dje*_*zzL的帖子

当我这样编写自己的自定义组件时：

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>

所有这些都是因为angular将这个组件的html代码包装到html标签中。因此，我们失去了离子成分的强度（制备的CSS）。请不要建议使用归因组件分配，例如：

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

因为这只是简单的例子。

在不丢失准备好的CSS的情况下，编写带有离子成分的自定义成分的最佳方法是什么？