Polimorfismo tra componenti angolari2

Question

Ho classi diverse (modelli) che sono figli di un genitore. Ogni bambino ha una propria forma, ma vorrei che la Componente che ha i riferimenti principali restituisca la forma specifica a seconda del bambino. Un esempio:

modelle

export interface Item { 
    title: string; 
} 

export class Exercise implements Item { 
    constructor(public title:string, public description:string); 
} 

export class Break implements Item { 
    constructor(public title:string, public time:number); 
} 

Forme

@Component({ 
    selector: 'item-form', 
    template: `<item></item> 
    `, 
    inputs: ['model:item'] 
}) 
export abstract class ItemFormComponent { 
    model: Item; 
} 

@Component({ 
    selector: 'item-form', 
    template: ` 
     <form #exerciseForm="ngForm"> 
      <input type="text" class="form-control" required 
      [(ngModel)]="model.title" 
      ngControl="title" #name="ngForm" > 
      <input type="text" class="form-control" required 
      [(ngModel)]="model.description" 
      ngControl="desription" #name="ngForm" > 
     </form> 
    `, 
    providers: [ExerciseService], 
    inputs: ['model:exercise'] 
}) 
export class ExerciseFormComponent extends ItemFormComponent { 
    model = new Exercise("Title", "Description"); 

    constructor(private _exerciseService: ExerciseService) { 
     super(); 
    } 
} 

@Component({                       
    selector: 'item-form',                    
    template: ` 
     <form #exerciseForm="ngForm"> 
      <input type="text" class="form-control" required 
      [(ngModel)]="model.title" 
      ngControl="title" #name="ngForm" > 
      <input type="text" class="form-control" required 
      [(ngModel)]="model.time" 
      ngControl="number" #name="ngForm" > 
     </form> 
    `,              
    inputs: ['model:break']                   
})                                                   
export class BreakFormComponent extends ItemFormComponent {           
    model = new Break("Title", 10);                    

} 

App

@Component({ 
     selector: 'app', 
     template: ` 
      <h1>App</h1> 
      <div *ngFor="#item of items"> 
       <item-form [model]="item"></item-form> <!-- HERE IS WHERE FORM SHOULD BE INSERTED! --> 
      </div> 
     `, 
     directives: [ItemFormComponent] 
}) 
export class App { 
    items: Item[] = [new Exercise("Exercise", "Description"), new Break("Break", 10)]; 
} 

Answer 1

Penso che avete bisogno di qualcosa di simile:

 <div *ngFor="#item of items"> 
      <item-form-a *ngIf="item instanceOf A" [model]="item"></item-form-a> 
      <item-form-b *ngIf="item instanceOf B" [model]="item"></item-form-a> 
     </div> 

Non faccio uso dattiloscritto e non so se instanceOf è supportato nelle espressioni angolari. In caso contrario, è necessario spostare il controllo su una funzione di App e chiamarlo come *ngIf="isInstanceOf(item, A).