当我像这样编写自己的自定义组件时：
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>
因为这只是一个简单的例子.
解决方法
你必须意识到Ionic正在使用SASS并针对多个平台.
当您创建< deletableItem>< / deletableItem>时你应该模仿离子团队用离子复选框做的事情,并创建你的Sass文件.
当您创建< deletableItem>< / deletableItem>时你应该模仿离子团队用离子复选框做的事情,并创建你的Sass文件.
为deleteableItem定义自己的SASS.
此外,on the Ionic website you can find the various SASS component/platform variables.
我还提供了一个详细的相关解释,关于Ionic CSS classes assignment也可能对你有所帮助.
您还可以使用Chrome检查在Developer工具中查看ion-checkBox的类分配,并将它们与Ionic网站上的列表进行比较.
@H_502_57@
