Я хочу сделать условную привязку свойства для 2 входов

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 унаследованы от animal:

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