Типы привязки данных в Angular

RedDeveloper
23.02.2023 09:26
Типы привязки данных в Angular

В этой статье мы изучим различные типы привязки данных и синтаксис привязки в Angular.

Что такое привязка данных?

Привязка данных автоматически поддерживает страницу в актуальном состоянии на основе состояния вашего приложения. Вы используете привязку данных, чтобы указать такие вещи, как источник изображения, состояние кнопки или данные для конкретного пользователя.

Типы привязки данных :

Angular предоставляет три категории привязки данных в зависимости от направления потока данных:

  • От источника к представлению
  • От представления к источнику
  • В двусторонней последовательности от представления к источнику к представлению

Интерполяция

Интерполяция - это вставка выражений в размеченный текст. По умолчанию интерполяция использует двойные фигурные скобки {{ }} в качестве разделителей.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: server.component.html   -->

<p>{{ "Server" }} with id {{ server_id }} is {{ getServerStatus() }}.</p>
// file : server.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css'],
})
export class ServerComponent {
  server_id: number = 10;
  server_status: string = 'online';
  getServerStatus() {
    return this.server_status;
  }
}

Привязка свойств

Angular помогает задавать значения для свойств HTML-элементов или директив. Чтобы привязать свойство элемента, заключите его в квадратные скобки [], что идентифицирует свойство как целевое.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: servers.component.html   -->

<button class = "btn btn-primary" [disabled] = "!allowNewServer">
  Demo Button
</button>
// file : servers.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css'],
})
export class ServersComponent {
  allowNewServer: boolean = false;
  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 3000);
  }
}

После инициализации компонента нам нужно подождать 3 секунды, после чего кнопка будет активирована.Привязка свойств в

Вид вывода при инициализации компонента.
Вид вывода при инициализации компонента.
Выходной вид через 3 секунды.
Выходной вид через 3 секунды.

Привязка событий

Привязка событий позволяет прослушивать и реагировать на действия пользователя, такие как нажатие клавиш, движение мыши, щелчки и прикосновения. Синтаксис состоит из имени целевого события в круглых скобках, т.е. () слева от знака равенства, и кавычек шаблона справа.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: servers.component.html   -->

<button class = "btn btn-success" (click) = "onCreateServer()">Add Server</button>
<p>{{ serverCreationStatus }}</p>
// file : servers.component.ts

...
serverCreationStatus: string = 'No new server created!';
onCreateServer() {
    this.serverCreationStatus = 'Server Created successfully!';
  }

Когда мы нажимаем на кнопку, текст изменяется.

Вид вывода после нажатия кнопки.
Вид вывода после нажатия кнопки.

Двустороннее связывание

Двустороннее связывание данных относится к обмену данными между классом компонента и его шаблоном. Если вы измените данные в одном месте, они автоматически вернутся на другой конец. Например, если вы измените значение поля ввода, то оно также обновит значение вложенного свойства в классе компонента.

Давайте посмотрим, как реализовать это в Angular.

<!--  file: servers.component.html   -->

<h4>Two Way Binding</h4>
<pre>{{ user | json }}</pre>
<input
  type = "text"
  class = "form-control"
  [(ngModel)] = "user.name"
  placeholder = "name"
/>
<br />
<input
  type = "text"
  class = "form-control"
  [(ngModel)] = "user.job"
  placeholder = "job"
/>
// file : servers.component.ts

...
user = {
    name: 'Anirban',
    job: 'Dev',
  };

Если мы изменяем данные в поле ввода, то одновременно изменяются и выходные данные.

Вид вывода
Вид вывода

Ура!

Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?

05.05.2023 14:00

Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.

Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом

05.05.2023 11:59

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы

05.05.2023 11:57

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.

Массив зависимостей в React
Массив зависимостей в React

05.05.2023 09:44

Все о массиве Dependency и его связи с useEffect.