Angular에서 양방향 데이터 바인딩이란 무엇입니까?

Angular의 양방향 데이터 바인딩은 컴포넌트에서 뷰로, 그리고 그 반대로 데이터를 흐르게 합니다. 이는 최종 사용자에게 정보를 표시하는 데 사용되며, UI를 사용하여 기본 데이터를 변경할 수 있도록 합니다. 이는 뷰(템플릿)와 이미 언급한 컴포넌트 클래스 간에 양방향 연결을 만듭니다. 이 프로세스는 WPF의 양방향 바인딩과 유사합니다.

Angular에서 데이터 바인딩은 어떻게 작동하나요?

Angular 데이터 바인딩은 데이터를 동기화하여 작동합니다. 각도 구성 요소를 UI에 추가할 수 있습니다. 이렇게 하면 항상 데이터의 현재 값을 표시할 수 있습니다. 양방향 바인딩의 경우, 모델과 뷰 간에 자동 데이터 동기화가 수행되어 항상 동기화된 상태를 유지합니다. 따라서 모델에 변경 사항이 있으면 뷰에도 즉시 반영됩니다. 그 반대의 경우도 마찬가지입니다. 뷰에서 변경된 내용은 모델에도 업데이트됩니다. Angular의 양방향 데이터 바인딩은 최종 사용자에게 정보를 표시하는 데 사용되며, 최종 사용자는 UI를 사용하여 기초 데이터를 변경할 수 있습니다. 이렇게 하면 뷰(템플릿)와 컴포넌트 클래스 간에 양방향 연결이 이루어집니다. 이는 WPF의 양방향 바인딩과 유사합니다.

단방향 바인딩은 구성 요소 클래스에서 상태를 가져와 뷰에 표시합니다. 이 코드를 살펴보겠습니다.

<input #myTitle (keyup)="keyup(myTitle.value)">
<h2>{{ text }}</h2>
html

export class SampleComponent implements OnInit {

text = 'default value';

keyup(value) {
  this.text = value;
}
...
typescript

여기서는 간단히 사용하고 있습니다. interpolation 텍스트 속성을 HTML에 바인딩합니다. 그러면 UI에 텍스트 속성 값이 표시됩니다. 그만큼 input 요소는 사용자 상호작용을 처리하고 기본 요소를 업데이트합니다. text 속성을 사용하여 UI를 통해 이벤트 바인딩. 기본적으로 입력은 단방향 바인딩과 반대로 UI에서 정보를 가져와 구성 요소 클래스의 속성을 업데이트합니다. 입력의 keyup 이벤트에 연결된 메서드는 이벤트가 발생할 때마다 텍스트 속성을 업데이트합니다. 이벤트 메서드에 의해 텍스트 속성 값이 변경되면 해당 변경 사항은 다음을 사용하는 단방향 바인딩을 통해 UI에 반영됩니다. interpolation h2 요소의 따라서 사용자가 입력 요소에 무언가를 입력하면 h2 텍스트가 즉시 업데이트됩니다. 이 동작은 기본적으로 양방향 바인딩의 시뮬레이션입니다. 단방향 바인딩과 keyup 이벤트 처리기를 사용하여 WPF에서도 동일한 결과를 얻을 수 있지만 양방향 바인딩이 사용하기 훨씬 더 편리합니다.

Angular에서 양방향 데이터 바인딩을 구현하는 방법

다행히도 훨씬 더 쉬운 방법으로 위의 샘플 논리를 구현할 수 있으며 이것이 바로 양방향 바인딩 단계입니다!

양방향 바인딩의 방향은 단순히 컴포넌트 클래스를 UI로, 하지만 UI에서 컴포넌트 클래스로 또한. 이를 달성하기 위해 우리는 지령 ~라고 불리는 ngModel. 위의 샘플을 다음과 같이 업데이트해 보겠습니다. ngModel 지령. 이에 대한 구문은 여는 괄호와 여는 괄호, 그리고 그에 상응하는 닫는 괄호와 대괄호입니다. 이것은 상자 안에 바나나, 그럼 실제로 보시죠!

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

WPF의 동등한 바인딩은 다음과 같습니다.

<TextBox Text="{Binding Path=Text, Mode=TwoWay}"></TextBox>
<TextBlock Text="{Binding Path=Text, Mode=OneWay}"></TextBlock>
xml

Angular 바인딩은 구문의 문제이고 WPF에서는 설정, 특히 Binding.Mode의 값과 더 비슷합니다.

이 코드를 실행하면 콘솔에 ngModel이 입력 요소의 알 수 없는 속성이라는 오류가 발생합니다. 이는 ngModel 지시문을 사용하려면 FormsModule을 가져와야 하기 때문입니다. app.module.ts 파일로 가져와야 합니다.

import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
...
typescript

샘플을 실행하면 초기 입력 값은 다음과 같습니다. 기본값, 이는 text 재산의 가치. 입력은 편집 가능하므로 해당 값을 변경하면 h2 요소에 즉시 반영됩니다. 따라서 입력을 입력하면 text 속성을 사용하면 h2 요소가 해당 값을 표시합니다. interpolation.

이를 달성하는 또 다른 동등한 방법은 다음과 같습니다.

<input [ngModel]="text" (ngModelChange)="text = $event">
html

이는 실제로 속성 바인딩과 이벤트 바인딩을 사용한 첫 번째 샘플과 유사합니다.

추가 리소스

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular에서 양방향 데이터 바인딩이란 무엇입니까?

Angular에서 데이터 바인딩은 어떻게 작동하나요?

Angular에서 양방향 데이터 바인딩을 구현하는 방법

추가 리소스

테마