DevGang
Авторизоваться

Понимание привязки свойств в Angular 11

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

Прежде чем ты начнешь

Чтобы продолжить демонстрацию в этой статье, вы должны иметь:

  1. Интегрированная среда разработки, такая как VS Code
  2. На вашем компьютере установлен node версии 11.0
  3. Node Package Manager версии 6.7 (обычно поставляется с установкой Node)
  4. Angular CLI версии 8.0 или выше
  5. Последняя версия Angular (версия 11)
# Выполните команду в терминале
ng version

Подтвердите, что вы используете версию 11, и обновите ее до 11, если нет.

Также будет полезно иметь следующие вещи:

  1. Практическое знание фреймворка 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. 

Источник:

#Angular
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить