在構造函數中使用T創建通用組件

我在嘗試使通用組件顯示列表資源。我遇到了在HTML中實例化組件的問題。我正在使用answer來嘗試解決這個問題，但我覺得它不起作用。在構造函數中使用T創建通用組件

我有這樣的組件

<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>在構造函數中Dependency Inject不能解決類型。

我想盡可能地重複使用它。我怎樣才能正確地初始化這個通用組件？如果這是不可能的，在T解決後我怎麼能晚點抓住baseProvider？

來源

2017-06-21 johnny 5

我解決了這個通過延遲初始化，並使得相關性的@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>

來源

2017-06-25 01:03:03

在構造函數中使用T創建通用組件

回答

相關問題