了解Angular 11中的属性绑定

让我们看一下Angular中的属性绑定，这是一种用于传输数据的单向数据绑定技术。

Angular

Google的Angular JavaScript（TypeScript）框架，用于在GitHub上构建具有超过7万颗星的移动或桌面Web应用程序。 由Google的Angular团队以及许多社区成员和组织维护。

在你开始之前

为了能够继续执行本文的演示，您应该具有：?

• ?像VS Code这样的集成开发环境
•   计算机上已安装节点版本11.0
•   NodePackage Manager 6.7版（通常随Node安装一起提供）
• ?AngularCLI版本8.0或更高版本
•   最新版本的Angular（版本11）

// run the command in a terminal

ng version

Bash

确认您正在使用版本11，如果没有，请更新至版本11。

其他将具有的其他优点是：

• ?初学者对Angular框架的了解

在这篇文章中，将向您介绍Angular中的属性绑定，其用途以及工作方式。

属性绑定

在Angular中，使用设置值将值从组件传递到其模板的一种方法是通过属性绑定。 这是用于传输数据的单向数据绑定技术的一个很好的例子。

句法

<template_element [property]= 'property'>

TypeScript

因此，基本上在后端，当我们将模板或DOM元素绑定到已定义的字段时，此字段在组件Angular内部定义，只是将字符串插值转换为属性绑定。

为什么属性绑定很重要

属性绑定的一大优点是您可以从组件本身控制模板元素。 Angular找到了非常好的方法来使开发人员完全控制他们使用的工具，这就是一个很好的例子。 开发人员可以不受限制地使用任何DOM元素上的逻辑来指示数据如何流动和更新。 属性绑定很酷的另一个重要原因是它也可以帮助您简化演示文稿代码，使其可重复使用。

我们将要建设的

我们将在一个新创建的Angular项目中说明Angular中的属性绑定，只是向您展示它是如何工作的。 在您的PC中打开一个位置，并通过运行以下命令创建一个新的angular项目：

ng new testapp

Angular

选择样式表类型和路由器选项等规范后，您便可以使用Angular应用支架。 您可以使用以下命令在开发中运行该应用程序：

cd testapp

ng serve

Angular

如果您访问app.component.html文件，将会看到很多样板代码。 让我们剥离所有内容，使其看起来像旧的Angular7。将下面的代码块复制到app.component.html文件中：

 

    Welcome to {{ title }}!

Here are some links to help you start:

•  

Tour of Heroes

•  

CLI Documentation

•  

Angular blog

HTML

我们将看到一些简单的用例，您可以在其中轻松进行属性绑定。

更改元素的颜色样式

您的应用程序组件文件应如下所示：

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']})export class AppComponent {

title = 'testapp';

paint = 'green';}

TypeScript

在这里，我们定义了一个变量，并为其分配了绿色属性。 现在将其绑定到列表项之一，我们可以使用本文已经看到的语法。

<template_element [property]= 'property'>

Bash

复制下面的代码块并将其粘贴到模板文件（app.component.html）中：

 

    Welcome to {{ title }}!

Here are some links to help you start:

•  

Tour of Heroes

•  

CLI Documentation

•  

Angular blog

HTML

如果查看最后一个标头标记，您会注意到我们已经将在组件中创建（绘制）的变量中的值绑定到我们在此处指定的内联样式的颜色值。

传递图像源链接

要在我们的组件中定义一个图像源链接，然后将其传递到视图，请将计算机上已有的随机图像复制到资产文件夹。 然后将以下代码复制到您的app.component.html文件中：

 

    Welcome to {{ title }}!

Here are some links to help you start:

•  

Tour of Heroes

•  

CLI Documentation

•  

Angular blog

HTML

您可以看到图像源已绑定到名为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';  }

TypeScript

禁用带有属性绑定的按钮

最后，让我们通过绑定属性的值禁用按钮。 在模板文件中，向您的代码添加一个按钮：

 

    Welcome to {{ title }}!

Here are some links to help you start:

•  

Tour of Heroes

•  

CLI Documentation

•  

Angular blog

 Test Button

HTML

您会看到我们正在使用DOM禁用按钮，并将其分配给switch的值。 现在让我们定义一个带有真实值的开关。 这是因为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';}

TypeScript

现在，如果您在浏览器中选中按钮，您将看到该按钮当前处于禁用状态，如果将该值更改为false，它将变为启用状态。

 

总结

在这篇文章中，我们看了一下Angular中的属性绑定，它是什么，为什么它很重要，最重要的是如何使用它。你可以看到它有多种用例，因此你可以玩转它，并找到更多的资源方法，使它成为你的Angular工作流程的一部分。祝你愉快!