When I write my own custom component like this:
import { Component } from '@angular/core';
@Component({
selector: 'deletableItem',
template: `
<ion-checkbox item-right></ion-checkbox>
`
})
export class DeletableItem {
constructor() {}
}
And use it in some 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>
The looking of it is worse than just put it in parent's component view at once like this:
<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>
All this because angular wrap this component's html code into html tag. So we lose ionic components strengths (prepared css). Please do not suggest attributive component assignment like:
<ion-checkbox item-right deletableItem></ion-checkbox>
Because this is just simple example.
What is the best way to write custom components with ionic components inside without losing prepared css?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…