angular - 如何在不丢失准备好的 css 的情况下在 Ionic 2/3 中编写自定义组件？

Question

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

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

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

并在一些 html View 中使用它:

<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>

它的外观比像这样立即将它放在父组件 View 中更糟糕:

<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 标签中。所以我们失去了 ionic 组件的优势(准备好的 css)。请不要建议像这样的属性组件分配:

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

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

在不丢失准备好的 css 的情况下编写带有 ionic 组件的自定义组件的最佳方法是什么？

Answer 1

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

查看源文件夹here对于 <ion-checkbox> .

为 deleteableItem 定义您自己的 SASS。

此外，on the Ionic website you can find the various SASS component/platform variables .

关于Ionic CSS classes assignment我也做了详细的相关解释 这也可能对您有所帮助。

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