Dvikryptis duomenų susiejimas Angular

Angular galima padaryti taip, kad kai įvedamas tekstas į įvesties lauką, šis tekstas automatiškai patektų į klasės savybę. Tai vadinama dvikryptis duomenų susiejimas.

Kad toks susiejimas veiktų, pirmiausia jį reikia įjungti. Tam failelyje komponento importuojame FormsModule:

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

Ir tada pridedame prie imports savybės dekoratoriaus @Component:

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

Po to dvikryptis duomenų susiejimas bus įjungtas ir mes galime jį panaudoti. Padarykime tai.

Pirmiausia deklaruokime klasės savybę, kurią vėliau paveiksime dvikrypčiu susiejimu:

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

Tarkime, kad turime div ir input. Tegu div'e atvaizduojama tam tikra klasės savybė:

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

Susiekime mūsų savybę text su įvesties lauko pasikeitimu. Tam įvesties lauke reikia parašyti specialią direktyvą [(ngModel)], kurios reikšmėje reikia nurodyti mūsų klasės savybę:

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

Dabar, jei paleisime kodą ir pradėsime įvesti tekstą į įvesties lauką, šis tekstas iškart pradės rodytis div'e.