Question

我有2种表格。两种形式的表格的前半部分相同。后半部分不同。我只想写一次表格的前半部分，然后包含它或将其扩展到表格的后半部分。

我的课程

class Hero {
  hp: number;
}

class Warrior extends Hero {
  attack: number;
}

class Mage extends Hero {
  mana: number;
}

我的组件和模板

@Component({
  selector: 'edit-warrior',
  templateUrl: "<form (ngSubmit)=\"save()\">\n" +
               "    <input class=\"form-control\" [(ngModel)]=\"hero.hp\">\n" +
               "    <input class=\"form-control\" [(ngModel)]=\"hero.attack\">\n" +
               "</form>\n",
})
export class EditWarrior {
  hero: Warrior;
}

@Component({
  selector: 'edit-mage',
  templateUrl: "<form (ngSubmit)=\"save()\">\n" +
               "    <input class=\"form-control\" [(ngModel)]=\"hero.hp\">\n" +
               "    <input class=\"form-control\" [(ngModel)]=\"hero.mana\">\n" +
               "</form>\n",
})
export class EditMage {
  hero: Mage;
}

我希望有一个包含表单通用部分的组件/文件，并且能够包含它。例如，让我们想象一下：

@Component({
  selector: 'edit-hero',
  templateUrl: "    <input class=\"form-control\" [(ngModel)]=\"hero.hp\">\n"
})
export class EditHero {
  @Input() hero: Hero;
}

有类似的东西

@Component({
  selector: 'edit-warrior',
  templateUrl: "<form (ngSubmit)=\"save()\">\n" +
                "    <hero-edit [hero]="hero"></hero-edit>\n" +
                "    <input class=\"form-control\" [(ngModel)]=\"hero.attack\">\n" +
                "</form>\n",
})
export class EditWarrior {
  hero: Warrior;
}

@Component({
  selector: 'edit-mage',
  templateUrl: "<form (ngSubmit)=\"save()\">\n" +
                "    <hero-edit [hero]="hero"></hero-edit>\n" +
                "    <input class=\"form-control\" [(ngModel)]=\"hero.mana\">\n" +
                "</form>\n",
})
export class EditMage {
  hero: Mage;
}

在Angular 2中有可能吗？我可以尝试使用其他体系结构吗？任何帮助，文档，想法将不胜感激。

如何在角度2中包含/扩展/重用表格

0 个答案: