在构造函数中用T创建通用组件 [英] Create Generic Component With T in Constructor

问题描述

我试图制作一个通用组件来显示列表资源。我遇到了在HTML中实例化组件的问题。我使用这个答案来尝试解决这个问题，但我觉得它不会起作用。

我有这个组件

 < ion-list> 
< ion-item-sliding * ngFor =让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-forwarditem-right>< / ion-icon> 
< / ion-item> 
< ion-item-options side =right> 
<按钮离子按钮颜色=危险（点击）=删除（entity.id）> 
< ion-icon name =trash>< / ion-icon>删除
< / button> 
< / ion-item-options> 
< / ion-item-sliding> 
< / ion-list> 
  

 

  export class PageListBaseComponent< T extends IHasId> {
 
 @Input（）entityType：T; 
 @Input（）detailPageType：any; 
 public entityList：T []; 
 
构造函数（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> 
 
导出类UsersPage {
 
 public userType：User; 
 public userDetailType：ProfilePage; 
 
构造函数（public navCtrl：NavController，public navParams：NavParams）{
} 
} 
  

这不起作用，因为我的组件在构造函数中引用 public baseProvider：ProviderBase< T> ，依赖项注入无法解析类型。

我想尽可能地重复使用它。我怎样才能正确地初始化这个通用组件？如果这是不可能的，我怎么才能在T解析后抓取baseProvider？解决方案

解决方案通过延迟初始化，并使依赖项成为 @Input 属性

  export class PageListBaseComponent< T延伸IHasId> {
 
 @Input（）detailPageType：any; 
 @Input（）set baseProvider（provider：ProviderBase< T>）{
 provider.getList（）。subscribe（entities => {
 this.entityList = entities; 
 console.log（entities）; 
}）; 
} 
 
 public entityList：T []; 
 
构造函数（public navCtrl：NavController，public navParams：NavParams）
 {
 
 
 $ b navigateToDetail（id：number）{
 console.log（'test'+ id）
 this.navCtrl.push（this.detailPageType，{id}​​）
} 
} 
  

然后我修改页面以获取我们依赖项的具体实现，

  export class UsersPage {
 
 public userDetailType：any = ProfilePage; 
 
构造函数（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> 
  

I'm trying to make a generic component to display list resources. I'm running into issue instantiating the component in HTML. I was using this answer to attempt to fix the problem but I feel it will not work.

I have this Component

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

And I initialize it from my users page like so:

<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 does not work because my Component references the public baseProvider: ProviderBase<T> in the constructor the Dependency Inject cannot resolve the type.

I would like to be able to reuse this as much as possible. How can I initialize this generic component properly? If that is not possible, how can I late grab out the baseProvider after T resolves?

解决方案

I solved this by delaying the initialization, and making the dependency a @Input property

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

Then I Modify the Page to take in a concrete implementation of our dependency,

export class UsersPage {

  public userDetailType: any = ProfilePage;

  constructor(public navCtrl: NavController, public navParams: NavParams, public baseProvider: Users) {
      console.log(this.userType);
  }
} 

Then I implement the component like so:

<ion-content padding>
  <page-list-base [detailPageType]="userDetailType" 
      [baseProvider]="baseProvider"></page-list-base>
</ion-content>

这篇关于在构造函数中用T创建通用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！