如何在 angular 中拥有不同的组件实例

Question

I have a parent component and a child component. Here is the html from the parent. To summarize

parent.html

<child-component [(ngModel)]="model1"></child-component> //#1
<child-component [(ngModel)]="model2"></child-component> //#2 
<child-component [(ngModel)]="model3"></child-component> //#3
<child-component [(ngModel)]="model4"></child-component> //#4 
<button (click)="removeInput()">Remove #3</button>

parent.ts

@Component({
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.css']
})

export class ParentComponent implements OnInit {
@ViewChild(ChildComponent, {static: false}) childInteractor: ChildComponent;
removeInput()
{
  this.childInteractor.value = "";
}

}

What should I do to make the child component declared in the parent are different instances? because clicking the button removes #1 instead of #3

child.html

<input type="text" [(ngModel)]="value"> 

child.ts

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponent implements OnInit {
  value: any;
}

Answer 1

You are using the same 'model' attribute as ngModel

<child-component [(ngModel)]="model"></child-component>

this 'model' is the same in all 4 children.

please use an array or something, like model[1], model [2]... etc

Answer 2

So... the problem is, you overwrite values in one component, when updating in the sibling, is it correct? then what you have to do is not have same input and output in different child-component

<child-component [(ngModel)]="model1"></child-component>
<child-component [(ngModel)]="model2"></child-component>
<child-component [(ngModel)]="model3"></child-component>
<child-component [(ngModel)]="model4"></child-component>

You should probably read about ngmodel, input and outputs to undersand your own code