コンストラクタでTを使用して汎用コンポーネントを作成する

Question

リストリソースを表示するための汎用コンポーネントを作成しようとしています。私は、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を取り出すことができますか？

Answer 1

私はその後@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>