angular2

Question

में घटकों के बीच पॉलीमोर्फिज्म मेरे पास माता-पिता के बच्चे हैं जो विभिन्न वर्ग (मॉडल) हैं। प्रत्येक बच्चे का अपना रूप होता है, लेकिन मैं उस घटक को चाहता हूं जिसके माता-पिता के संदर्भ बच्चे के आधार पर विशिष्ट रूप प्रस्तुत करते हैं। एक उदाहरण:

मॉडल

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

} 

अनुप्रयोग

@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) पर कॉल करें।