Привязка данных автоматически поддерживает страницу в актуальном состоянии на основе состояния вашего приложения. Вы используете привязку данных, чтобы указать такие вещи, как источник изображения, состояние кнопки или данные для конкретного пользователя.
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', };
Если мы изменяем данные в поле ввода, то одновременно изменяются и выходные данные.
Ура!
05.05.2023 14:00
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
05.05.2023 11:59
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.
05.05.2023 11:57
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.
05.05.2023 09:26