Привязка данных автоматически поддерживает страницу в актуальном состоянии на основе состояния вашего приложения. Вы используете привязку данных, чтобы указать такие вещи, как источник изображения, состояние кнопки или данные для конкретного пользователя.
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 секунды, после чего кнопка будет активирована.Привязка свойств в
Привязка событий позволяет прослушивать и реагировать на действия пользователя, такие как нажатие клавиш, движение мыши, щелчки и прикосновения. Синтаксис состоит из имени целевого события в круглых скобках, т.е. () слева от знака равенства, и кавычек шаблона справа.
Давайте посмотрим, как реализовать это в 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', };
Если мы изменяем данные в поле ввода, то одновременно изменяются и выходные данные.
Ура!
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.