Question

我列出了不同类型的动物，例如猫和狗。当我在列表中选择一种动物进行版本编辑时，我需要将该值分配给子组件。子组件在edit.ts中有两个输入：@input cat：animal，@input dog：animal; 我只想为这些属性绑定之一传递数据。

我尝试了两个条件选择器：

<app-component *ngIf="conditionTypeDog" [Dog]="animalchoose">
</app-component>
<app-component *ngIf="conditionTypeCat" [cat]="animalchoose">
</app-component>

在组件中，我们具有：

@input dog: Dog; 
@input cat: Cat;

让我们承认Dog和Cat类是从动物继承的：

Dog extends Animal; 
Cat extends Animal; 

Animal {
 propertygeneric1:number;
 propertygeneric2: String;
}

cat extends animal { 
property1: boolean
property2: String;
} 

Dog extends animal { 
propertyDog1:number; 
propertyDog2:String; 
}

我想要一个这样的解决方案：

<app-component *ngIf="conditionEdit" [Dog|Cat] = "animalchoose"> 
</app-component>

所以我希望选择的动物有条件地分配给其中一种，有一种方法可以使选择的动物分配给狗或猫？

Answer 1

不幸的是，没有这样的事情：有条件地选择绑定哪个属性成角度。但是，您可以通过不同的方式完成相同的行为。我能想到的一种方法是使用@Input设置程序和instance of运算符来确定输入的类型，并将其分配给类的相关属性。

  private dog: Dog;
  private cat: Cat;

  @Input() set animal(val: Animal) {
    if (!val) {
      this.cat = null;
      this.dog = null;
    }
    if (val instanceof Dog) {
      this.cat = null;
      this.dog = val;
    }
    if (val instanceof Cat) {
      this.dog = null;
      this.cat = val;
    }
  }

这是一个简单的演示https://stackblitz.com/edit/angular-jerc5p

我想为两个输入绑定一个条件属性

1 个答案: