Angular 2+에서 일회성 데이터 바인딩

1. 보기에 대한 구성 요소
2. Angular 2+에서 일회성 데이터 바인딩을 사용하는 단계

Angular 2+에서 일회성 데이터 바인딩은 모델이나 입력 속성이 변경될 때만 뷰를 업데이트합니다. 이러한 유형의 데이터 바인딩은 보기에 대한 불필요한 업데이트를 줄여 컴퓨터의 성능을 높이고 작업량을 줄입니다.

단방향 데이터 바인딩의 단방향 특성은 분명합니다. 한 구성 요소 또는 보기의 데이터만 다른 구성 요소에 연결할 수 있습니다.

보기에 대한 구성 요소

여러 데이터 바인딩 전략은 단방향 데이터 바인딩을 사용하여 구성 요소의 데이터를 보기에 연결합니다.

속성 바인딩

이 기술을 사용하면 HTML 요소의 속성을 모델의 개체 속성에 바인딩할 수 있습니다. 여기에는 구성 요소의 속성 값을 변경하고 해당 값을 동일한 보기의 HTML 요소로 래핑하는 작업이 수반됩니다.

토글 기능과 멤버 간의 데이터 교환을 위해 속성 바인딩을 사용합니다.

속성 바인딩

이 기술을 사용하면 HTML 요소의 속성을 모델의 개체 속성에 바인딩하고 변경이 발생할 때 업데이트되는 속성 값을 지정할 수 있습니다.

클래스 바인딩

이 기술은 DOM 요소를 AngularJS 클래스에 바인딩하고 모델의 데이터로 업데이트할 수 있습니다.

보간 바인딩

보간 방법을 사용하면 사용자가 사용자 인터페이스 요소에 값을 첨부할 수 있습니다. 보간은 단방향 프로세스로 데이터를 바인딩하므로 데이터는 구성 요소에서 HTML 요소로 단 한 가지 방식으로 흐릅니다.

Angular 2+에서 일회성 데이터 바인딩을 사용하는 단계

이 섹션에서는 Angular 2+에서 단방향 데이터 바인딩을 사용하는 방법을 보여줍니다.

예(TypeScript):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

예(HTML):

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

여기를 클릭 위에서 언급한 코드의 라이브 데모를 확인하십시오.