Angular: 끝에서 끝까지 바인딩

바인딩은 뷰와 모델 사이에 라이브 연결을 생성합니다. Angularchange detection 알고리즘은 보기와 모델을 동기화 상태로 유지하는 역할을 합니다.

바인딩의 예:

텍스트 보간: {{expression}} 와 같이 이중 중괄호 쌍을 사용하여 보기에 표현식을 포함합니다.

전:

// app.component.ts (Referred as model)

export class AppComponent {

title = 'Data Binding'

}

// app.component.html (Referred as view)

  <h3>
    Welcome to {{ title }}!
  </h3>

아래와 같이 표시되었습니다.




속성 바인딩: HTML 요소 또는 지시문의 속성에 값을 설정하는 데 사용됩니다. 구성 요소 속성에서 대상 속성(DOM 요소 속성)으로 값을 한 방향으로 이동합니다. [DOM-property-name]="component-property"를 사용하여 속성 바인딩을 달성할 수 있습니다.

Brackets[] : Angular가 오른쪽 표현식을 평가하도록 합니다.

전:

// app.component.ts

export class AppComponent {

imgUrl = './assets/angular.svg'

}

// app.component.html

<img width="50" height="50" alt="Angular Logo" [src]="imgUrl" />

대괄호가 없으면 Angular는 오른쪽을 문자열 리터럴로 취급하고 속성을 해당 정적 값으로 설정합니다.

~처럼

<img src="./assets/angular.svg">

위의 두 시나리오 모두 아래와 같은 이미지를 보여줍니다.




이벤트 바인딩: 보기에서 모델로의 클릭, 키 입력 및 터치와 같은 사용자 작업을 수신하고 응답할 수 있습니다.

(event-name)="template-statement"로 쓸 수 있습니다.

  triggerEvent() {
    this.message =
      "User triggered the event by clicking on the button. It calls corresponding template statement (function in model) which displayed this message.";
  }

<button (click)="triggerEvent()">Click Me!</button>
<p>{{message}}</p>

(클릭) - 이벤트 이름
제출() - 템플릿 문

아래와 같이 표시됩니다.



양방향 바인딩: 속성과 이벤트 바인딩의 조합입니다. 양방향 바인딩은 이벤트를 수신하고 동시에 값을 업데이트합니다.

간단히 말해서, 모델에 영향을 미치는 데이터 관련 변경 사항은 일치하는 뷰에 즉시 전파되며 그 반대의 경우도 마찬가지입니다.

<!--Built-in HTML Element: -->
<input id="count" type="number" [(ngModel)]="count" />

<!--Custom Element: -->
<app-count [(size)]="size"></app-count>
<!--(or)-->
<app-count [size]="size" (sizeChange)="size=$event"></app-count>

양방향 바인딩이 작동하려면 @Output() 속성이 sizeChange 속성인 경우 @Input() 속성이 size 패턴을 따라야 합니다.

출력은 다음과 같습니다.



속성 바인딩: 속성에 직접 값을 설정하는 데 도움이 됩니다. 속성 바인딩을 사용하면 접근성을 개선하고 응용 프로그램을 동적으로 스타일링하고 여러 CSS 클래스를 동시에 관리할 수 있습니다.

이는 구문의 속성 바인딩과 유사하지만 attr와 같이 [attr.attribute-name]="expression" 접두사가 붙습니다.

속성 바인딩의 기본 사용 사례는 ARIA 속성을 설정하는 것입니다.

<button id="submit" [attr.aria-label]="actionName">{{actionName}}</button>

클래스 또는 스타일 바인딩: 요소의 클래스 속성에서 CSS 클래스를 추가하거나 제거하고 스타일을 동적으로 설정합니다. 이 바인딩은 속성 바인딩 구문도 따릅니다.

클래스 바인딩 구문은 다음과 같습니다.

 <p [class.red-color]="isSingle">Single Class binding</p>

 <p [class]="'blue-color skyblue-background'">Multi Class string binding</p>

 <p
    [class]="{
      'blue-color': isBlueColor,
      'skyblue-background': isSkyblueBackground
    }">
    Multi Class object binding
 </p>

 <p [class]="['blue-color', 'skyblue-background']">
    Multi Class array binding
 </p>

스타일 바인딩 구문은 다음과 같습니다.

 <p [style.color]="'green'">Single Class binding</p>

 <p [style]="'color: green; background-color: yellow'">
    Multi Style string binding
 </p>

 <p [style]="{ color: 'green', border: '1px solid red' }">
    Multi Style object binding
 </p>

구문 및 구현에 대한 최상의 이해를 위해 다음을 참조하십시오.

angular-ivy-xvy5j3.stackblitz.io


유용한 개선 사항을 제안해 주세요. 이 기사를 업데이트하게 되어 항상 기쁩니다.

참조: https://angular.io/guide/binding-overview

감사.

내 트위터: