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

Question

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

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的情况下，编写带有离子成分的自定义成分的最佳方法是什么？

Answer 1

您必须意识到 Ionic 使用 SASS 并面向多个平台。当你创建你的文件时，<deletableItem></deletableItem>你应该模仿 ionic 团队对 ion-checkbox 所做的事情，并创建你的 Sass 文件。

在此处查看的源文件夹<ion-checkbox>。

为deleteableItem 定义您自己的SASS。

此外，在 Ionic 网站上您可以找到各种 SASS 组件/平台变量。

我还给出了有关Ionic CSS 类分配的详细相关解释，可能对您也有帮助。

您还可以使用 Chrome检查在 Developer 工具中查看 ion-checkbox 的类分配，并将它们与 Ionic 网站上的列表进行比较。