I'm currently working on creating a versatile component for displaying lists of resources. However, I've encountered an issue when trying to instantiate the component in HTML. I initially tried using this solution to resolve the problem, but it doesn't seem to be effective.
Here is the component code:
<ion-list>
<ion-item-sliding *ngFor="let entity of entityList" #item>
<ion-item (click)="navigateToDetail(entity.id)">
<ion-avatar item-left>
<img src="http://modexenergy.com/wp-content/themes/modex_wp/img/avatar.png">
</ion-avatar>
<h2>{{ entity.email }}</h2>
<ion-icon name="arrow-forward" item-right></ion-icon>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="delete(entity.id)">
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
export class PageListBaseComponent<T extends IHasId> {
@Input() entityType: T;
@Input() detailPageType: any;
public entityList: T[];
constructor(public navCtrl: NavController, public navParams: NavParams, public baseProvider: ProviderBase<T>) {
baseProvider.getList().subscribe(entities => {
this.entityList = entities;
console.log(entities);
});
}
delete(id: number) {
console.log(id);
}
navigateToDetail(id: number) {
console.log('test ' + id)
this.navCtrl.push(this.detailPageType, { id })
}
}
And I call it from my users page like this:
<ion-content padding>
<page-list-base [entityType]="userType" [detailPageType]="userDetailType">
</page-list-base>
</ion-content>
export class UsersPage {
public userType: User;
public userDetailType: ProfilePage;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
This setup fails because the Component references
public baseProvider: ProviderBase<T>I aim to maximize reusability with this generic component. How can I correctly initialize it? If that's not feasible, how can I retrieve the baseProvider after T has been resolved?