angular2中組件之間的多態性

我有不同的類（模型）誰是父母的子女。每個孩子都有自己的形式，但我希望具有父引用的組件根據孩子呈現特定的形式。舉個例子：angular2中組件之間的多態性

模式

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

來源

2016-02-24 Fran b

TypeScript支持多態，但Angular註釋不支持。我認爲你需要在指令字段中指定類的確切名稱，而不是抽象超類。 – MatthewScarpino

這是「誰是父母的孩子。」真的關於親子關係還是這意味着超類 - 子類關係？ –

Angular Cookbook的動態表單配方有一個基本的Questions類，它具有派生類用於指示應該使用的控件的'controlType'屬性，以及具有使用'controlType'作爲開關變量的switch語句的單個問題組件，以及每個差異控制案例可以使用： https://angular.io/docs/ts/latest/cookbook/dynamic-form.html 這可能是你可以做的最好的。 – Ergwun

我想你需要這樣的東西：

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

來源

2016-02-25 05:34:26

我用'* ngIf =「item instanceof A」'進行了測試，但不支持。另外我用'* ngIf =「isInstanceOf（item，A）'嘗試過，但是A總是未定義的，我不知道爲什麼，因此我創建了：'* ngIf =」isA（item）'，但是item是intanceof object！？ –

這是預料不到的。類型不是組件類的成員，綁定不允許引用組件外的事物。因此'A'完全不能用於綁定表達式。我不知道爲什麼'isA（item）{return item instanceOf A; ''不起作用。我不使用TS我只是看看類型檢查。也許你需要一個解決方法，以便這些項目提供一個允許檢查其類型的屬性（如包含類名稱的字符串字段）。 –

@Franb：這實際上並不回答你的問題，因此不應該標記爲這樣。 –

angular2中組件之間的多態性

回答

相關問題