typescript – angular2中组件之间的多态性

发布时间：2020-12-17 07:26:42 所属栏目：安全来源：网络整理

导读：我有不同的班级(模特),他们是父母的孩子.每个孩子都有自己的形式,但我希望具有父参考的组件根据孩子呈现特定的形式.一个例子：楷模 export interface Item { title: string;}export class Exercise implements Item { constructor(public title:string,publ

我有不同的班级(模特),他们是父母的孩子.每个孩子都有自己的形式,但我希望具有父参考的组件根据孩子呈现特定的形式.一个例子：

楷模

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

我想你需要这样的东西：

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

我不使用TypeScript,也不知道Angular表达式是否支持instanceOf.如果不是,您需要将支票移动到App的功能并将其称为* ngIf =“isInstanceOf(item,A).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!