angular 2 Ist es möglich zu listen, die Vererbung Artikel haben

Question

Ich bin Neuling mit eckigen 2 Ich habe eine Frage, aber versuche es noch nicht. Ich habe eine Liste der Todo-Liste aber Element in dieser Liste erstellen möchten verschiedene Komponenten & Klasse (aber jede Komponente Vererbung von gleichen Eltern)

class Todo {} 
class TodoPic extends Todo {} 
class TodoVideo extends Todo {} 

@Component({ 
    selector: 'todo', 
    template: '...' 
}) 
class AbstractTodoComponent { 
    todo: Todo; 
} 

@Component({ 
    selector: 'todo-pic', 
    template: '...' 
}) 
class TodoPicComponent extends AbstractTodoComponent {} 

@Component({ 
    selector: 'todo-video', 
    template: '...' 
}) 
class TodoVideoComponent extends AbstractTodoComponent {} 

und verwenden ähnliche

@Component({ 
    selector: 'app', 
    template: '<todo *ngFor="let item in todoList"></todo>' 
}) 
class AppComponent { 
    todoList: Todo[] 
    constructor() { 
     todoList.push(new TodoPic()) 
     todoList.push(new TodoVideo()) 
    } 
} 

Answer 1

Sie könnten Hebel DynamicComponentLoader, um die Komponenten dynamisch zu erstellen, entsprechend dem Typ von jedem todo.

Überprüfen Sie eine demo plunker here.

Wichtige Code:

@Component({ 
    selector: 'app', 
    template: 'stuff before<hr><div #todoLocation></div><hr>stuff after' 
}) 
class AppComponent { 

    todoList: Todo[] = [new TodoPic(), new TodoVideo()]; 

    @ViewChild('todoLocation', {read: ViewContainerRef}) todoLocation:ViewContainerRef; 

    constructor(private dcl: DynamicComponentLoader) { } 

    ngAfterViewInit() { 
    this.todoList.forEach(todo => this.loadComponentForTodo(todo)); 
    } 

    loadComponentForTodo(todo: Todo) { 
    let componentForType = this.inferComponentForType(todo); 
    // this is where the component is created and loaded 
    this.dcl.loadNextToLocation(componentForType, this.todoLocation) 
    .then((c:ComponentRef) => { 
       c.instance.todo = todo; 
    }); 
    } 

    inferComponentForType(todo: Todo) { 
    let componentForType = AbstractTodoComponent; 
    if (todo instanceof TodoPic) { 
     return TodoPicComponent; 
    } if (todo instanceof TodoVideo) { 
     return TodoVideoComponent; 
    } 
    } 

}