Տվյալների երկկողմանի կապ Angular-ում

Angular-ում հնարավոր է այնպես անել, որ ինպուտում տեքստ մուտքագրելու ընթացքում, այդ տեքստը ավտոմատ կերպով ընկնի դասի հատկության մեջ: Սա կոչվում է տվյալների երկկողմանի կապ:

Որպեսզի նման կապ աշխատի, նախ անհրաժեշտ է այն միացնել: Դրա համար ֆայլում կոմպոնենտի իմպորտենք FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

Ապա ավելացնենք imports հատկության մեջ @Component դեկորատորի:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Դրանից հետո տվյալների երկկողմանի կապը կմիացվի, և մենք կկարողանանք օգտագործել այն: Եկեք անենք դա:

Նախ հայտարարենք դասի հատկություն, որին ապա կենթարկենք երկկողմանի կապի:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Ենթադրենք, ունենք դիվ և ինպուտ: Ենթադրենք դիվում արտահայտվում է դասի որոշակի հատկություն:

html<div>
  {{ text }}
</div>
<input>

Եկեք կապենք մեր text հատկությունը ինպուտի փոփոխության հետ: Դրա համար ինպուտում անհրաժեշտ է գրել հատուկ դիրեկտիվա [(ngModel)], որի արժեքով պետք է նշել մեր դասի հատկությունը:

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

Այժմ, եթե գործարկենք կոդը և սկսենք մուտքագրել տեքստ ինպուտում, այդ տեքստը անմիջապես կսկսի ցուցադրվել դիվում: