Понимание привязки свойств в Angular 11
Давайте посмотрим на привязку свойств в Angular, методе односторонней привязки данных, который используется для передачи данных.
Прежде чем ты начнешь
Чтобы продолжить демонстрацию в этой статье, вы должны иметь:
- Интегрированная среда разработки, такая как VS Code
- На вашем компьютере установлен node версии 11.0
- Node Package Manager версии 6.7 (обычно поставляется с установкой Node)
- Angular CLI версии 8.0 или выше
- Последняя версия Angular (версия 11)
# Выполните команду в терминале
ng version
Подтвердите, что вы используете версию 11, и обновите ее до 11, если нет.
Также будет полезно иметь следующие вещи:
- Практическое знание фреймворка Angular на начальном уровне
В этой статье вы познакомитесь с привязкой свойств в Angular, с тем, для чего она используется и как работает.
Привязка свойств
В Angular один из способов передать значения из компонента в его шаблон с заданным значением - это привязка свойств. Это отличный пример метода односторонней привязки данных, используемого для передачи данных.
Синтаксис
<template_element [property]= 'property'>
Таким образом, в основном на бэкэнде, когда мы привязываем шаблон или элемент DOM к определенному полю, это поле определяется внутри компонента. Angular просто превращает интерполяцию строки в привязку свойства.
Почему привязка свойств важна
Одна из замечательных особенностей привязки свойств - это контроль, который вы получаете над элементами шаблона из самого компонента. Angular находит действительно отличные способы предоставить разработчикам полный контроль над инструментами, с которыми они работают, и это яркий тому пример. Разработчик может диктовать, как потоки данных обновляются с его собственной логикой для любого элемента DOM без ограничений. Еще одна важная причина, по которой привязка свойств - это круто, заключается в том, что она может помочь сделать ваш код чистым и пригодным для повторного использования.
Что мы будем строить
Мы проиллюстрируем привязку свойств в Angular во вновь созданном проекте Angular, чтобы показать вам, как это работает. Откройте папку на своем ПК и создайте новый проект angular, запустив:
ng new testapp
После выбора таких спецификаций, как тип таблицы стилей и параметры маршрутизатора, у вас будет готовый каркас приложения Angular. Вы можете запустить приложение с помощью следующих команд:
cd testapp
ng serve
Если вы посетите свой файл app.component.html, вы увидите, что там много шаблонного кода. Давайте разберем все, чтобы оно выглядело как старый Angular 7. Скопируйте блок кода ниже в файл app.component.html:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
Мы увидим несколько простых вариантов использования, в которых можно легко выполнить привязку свойств.
Изменение цвета элемента
Файл компонента вашего приложения должен выглядеть примерно так:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testapp';
paint = 'green';
}
Здесь мы определили переменную paint и присвоили ей green. Теперь, чтобы привязать его к одному из элементов списка, мы можем использовать синтаксис, который мы уже видели в этой статье.
<template_element [property]= 'property'>
Скопируйте приведенный ниже блок кода и вставьте его в файл шаблона (app.component.html):
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" >
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2 [ngStyle]="{color:paint}" >Angular blog</h2>
</li>
</ul>
<router-outlet></router-outlet>
Если вы посмотрите на последний тег заголовка, вы заметите, что мы связали значение в переменной, которую мы создали (paint) в компоненте, со значением цвета встроенного стиля, который мы здесь указали.
Передача ссылки на источник изображения
Чтобы ссылка на источник изображения была определена в нашем компоненте и затем передана в представление, скопируйте случайное изображение, которое у вас уже есть на вашем компьютере, в папку с assets. Затем скопируйте приведенный ниже код в файл app.component.html:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" >
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2 [ngStyle]="{color:paint}" >Angular blog</h2>
</li>
</ul>
<img [src]="src">
<router-outlet></router-outlet>
Вы можете видеть, что источник изображения привязан к переменной src. Теперь откройте файл component.ts и установите переменную, как показано ниже:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cdktest';
paint = 'green';
src = '../assets/d.jpg';
}
Отключение кнопки с привязкой свойства
Наконец, давайте отключим кнопку через значение связанного свойства. В файле шаблона добавьте кнопку в код:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" >
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2 [ngStyle]="{color:paint}" >Angular blog</h2>
</li>
</ul>
<button [disabled]='switch'>Test Button</button>
<img [src]="src">
<router-outlet></router-outlet>
Вы видите, что мы используем в кнопке disabled и назначаем ее значению switch. Давайте теперь определим переключатель с значением true. Это потому, что disabled принимает логическое значение.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cdktest';
paint = 'green';
src = '../assets/d.jpg';
switch = 'true';
}
Теперь, если вы проверите кнопку в своем браузере, вы увидите, что она в настоящее время отключена, а если вы измените значение на false, она станет активной.
Заключение
В этом посте мы рассмотрели привязку свойств в Angular, что это такое, почему это важно и, прежде всего, как оно используется. Вы можете видеть, что у него несколько вариантов использования, поэтому вы можете поиграть с ним и найти более изобретательные способы сделать его частью вашего рабочего процесса Angular.
