Question

在角度2中乱七八糟，我试图创建一个可以显示多种类型列表项的列表组件。

我的方法是分别创建各种类型的ListItemComponents，并让它们实现IListItemComponent接口。然后我将指定我的listComponent将通过我的父组件（主页）使用什么类型的listItemComponent。

home.component.html（Parent）

＆＃13;

<h2>Home</h2>
 <infinite-scroll>Loading</infinite-scroll>

＆＃13;

home.component.ts（Parent）

＆＃13;

import { Component, OnInit, provide, ViewChild } from '@angular/core';
import {InfiniteScrollComponent} from '../../core/components/infinite_scroll/infinite_scroll.component';
import { ImageBoardService } from '../../core/services/test.image_board.service';
import { DataProviderToken } from '../../core/injection/data_provider.token';
import {ImageBoardItemComponent} from '../../core/components/image_board_item/image_board_item.component';

@Component({
    moduleId: module.id,
    selector: '<home><home>',
    templateUrl: './home.component.html',
    directives: [InfiniteScrollComponent],
    providers: [provide(DataProviderToken, {useClass: ImageBoardService})]
})
export class HomeComponent implements OnInit {

    @ViewChild(InfiniteScrollComponent) private component: InfiniteScrollComponent;

    constructor() {
    }
    ngOnInit() {
        this.component.setItemComponent(ImageBoardItemComponent);
    }
}

＆＃13;

infinite_scroll_component.html（列表）

＆＃13;

<div class="infinate_scroll">
    <div #container> 
            
    </div>
</div>

＆＃13;

infinite_scroll_component.ts（List）

＆＃13;

import { Component, Compiler, OnInit, Inject, ViewChild, ViewContainerRef,
        ComponentRef, ComponentFactory, ComponentFactoryResolver} from '@angular/core';
import {IDataProvider} from '../../interfaces/data_provider.interface';
import { DataProviderToken } from '../../injection/data_provider.token';
import { IListItemComponent } from '../../interfaces/list_item_component.interface';

@Component({
    moduleId: module.id,
    selector: 'infinite-scroll',
    templateUrl: 'infinite_scroll.component.html'
})
export class InfiniteScrollComponent implements OnInit {

    @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
    private componentFactory: ComponentFactory<any>;

    private _dataProvider: IDataProvider;
    private _component: IListItemComponent;
    items: Array<any>;

    setItemComponent= function setItemComponent(component: IListItemComponent){
        this._component = component;
          this.viewContainerRef.createComponent(this.componentFactory, 0);
    };

    constructor(@Inject(DataProviderToken) private dataProvider: IDataProvider,
                componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
        this.componentFactory = componentFactoryResolver.resolveComponentFactory(this._component);
        this._dataProvider = dataProvider;
    }
    ngOnInit() {
       this.items = this._dataProvider.get();
    }
}

＆＃13;

list_item_component.interface.ts（列表项接口）

＆＃13;

export  interface IListItemComponent {

}

＆＃13;

image_board_item.html（列表项）

＆＃13;

<div>
    <div>{{test}}</div>
</div>

＆＃13;

image_board_item.component.ts（列表项）

＆＃13;

import { Component } from '@angular/core';
import { IListItemComponent} from '../../interfaces/list_item_component.interface';

@Component({
    moduleId: module.id,
    selector: 'image-board-item',
    templateUrl: 'image_board_item.html'
})
export class ImageBoardItemComponent implements IListItemComponent {
    test = 'test';
}

＆＃13;

我在内容中遇到以下问题 infinite_scroll_component.html

仍不确定我尝试做的事情是否可行。我可以将组件从我的主页传递到我的列表组件，该组件接受接口而不是组件。然后在运行时注入它？

Answer 1

您可以尝试下面，而不是Interface创建一个具体的类，

ListItemComponent

@Component({})
export  interface ListItemComponent {

}

然后扩展ImageBoardItemComponent类，如下所示

ImageBoardItemComponent

@Component({
  moduleId: module.id,
  selector: 'image-board-item',
  templateUrl: 'image_board_item.html'
})
export class ImageBoardItemComponent extends ListItemComponent {
   test = 'test';

   constructor(){
      super();
   }
}

当实际的组件类可能在setItemComponent函数中时，

创建组件工厂。

接口不起作用，因为resolveComponentFactory需要一个具体的类，你可以阅读它here

希望这会有所帮助!!

使用接口

1 个答案: