在构造函数中使用 T 创建通用组件

问题描述

我正在尝试制作一个通用组件来显示列表资源.我在用 HTML 实例化组件时遇到问题.我正在使用这个 answer 来尝试解决问题，但我觉得它不起作用.

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.

我有这个组件

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

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

This does not work because my Component references the public baseProvider: ProviderBase<T> in the constructor the Dependency Inject cannot resolve the type.

我希望能够尽可能多地重复使用它.如何正确初始化此通用组件?如果这不可能，我怎么能在 T 解析后延迟取出 baseProvider?

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?

推荐答案

我通过延迟初始化解决了这个问题，并将依赖项设为 @Input 属性

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 创建通用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！