角2のコンポーネント間の多型

Question

私は、親の子である異なるクラス（モデル）を持っています。すべての子は独自のフォームを持っていますが、親参照を持つComponentは子に応じて特定のフォームをレンダリングします。例：

モデル

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); 
} 

フォーム

@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

私はあなたのようなものが必要だと思います。

 <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> 

私は活字体を使用していないとinstanceOfは角式でサポートされているかどうかわかりません。そうでない場合は、小切手をAppの機能に移動し、それを*ngIf="isInstanceOf(item, A)のように呼び出す必要があります。