如何在 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>

所有这一切都是因为角度包装这个组件的 html 代码到 html 标签中。所以我们失去了离子成分强度(准备好的css(。请不要建议分配归因组件，例如：

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

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

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

Answer 1

你必须

意识到Ionic正在使用SASS并针对多个平台。当你创建你的<deletableItem></deletableItem>你应该模仿离子团队对ion-checkbox所做的，并创建你的Sass文件。

在此处查看源文件夹以获取<ion-checkbox>。

为可删除项定义您自己的 SASS。

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

我还给出了一个详细的相关解释，关于 Ionic CSS 类赋值，也可能对你有所帮助。

您还可以使用 Chrome inspect 在开发者工具中查看 ion 复选框的班级作业，并将其与 Ionic 网站上的列表进行比较。