我正在尝试制作一个通用组件来显示列表资源。我在 HTML 中实例化组件时遇到问题。我正在用这个answer试图解决这个问题,但我觉得这是行不通的。
我有这个组件
<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);
//this.baseProvider.deleteById(id).subscribe(result => {
// console.log(result);
//});
}
navigateToDetail(id: number) {
console.log('test ' + id)
this.navCtrl.push(this.detailPageType, { id })
}
}
我从我的用户页面初始化它,如下所示:
<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) {
}
}
这不起作用,因为我的组件引用了public baseProvider: ProviderBase<T>
在构造函数中,依赖注入无法解析类型。
我希望能够尽可能地重用它。如何正确初始化这个通用组件?如果这是不可能的,那么我怎样才能在 T 解析后稍后获取 baseProvider 呢?
我通过延迟初始化并将依赖关系设置为解决了这个问题@Input
财产
export class PageListBaseComponent<T extends IHasId> {
@Input() detailPageType: any;
@Input() set baseProvider(provider: ProviderBase<T>) {
provider.getList().subscribe(entities => {
this.entityList = entities;
console.log(entities);
});
}
public entityList: T[];
constructor(public navCtrl: NavController, public navParams: NavParams)
{
}
navigateToDetail(id: number) {
console.log('test ' + id)
this.navCtrl.push(this.detailPageType, { id })
}
}
然后我修改页面以接受我们的依赖项的具体实现,
export class UsersPage {
public userDetailType: any = ProfilePage;
constructor(public navCtrl: NavController, public navParams: NavParams, public baseProvider: Users) {
console.log(this.userType);
}
}
然后我像这样实现该组件:
<ion-content padding>
<page-list-base [detailPageType]="userDetailType"
[baseProvider]="baseProvider"></page-list-base>
</ion-content>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)