Let's talk about how to perform data binding on templates in angular10?-JS Tutorial-php.cn

This article will introduce you to the data binding ofangular10 templates, and take you through the three binding syntaxes, template/interpolation expressions, attribute binding, style binding, and event binding. Defining, two-way binding, built-in instructions, template reference variables, etc.

Let's talk about how to perform data binding on templates in angular10?

Overview of binding syntax

There are roughly three types of binding syntax (basic)

model => view (one-way: interpolation, attribute binding, style binding)
view => model (one-way: event binding) )
view <=> model (two-way: ngModule)

[Related tutorial recommendation: "angular tutorial"]

 {{expression}} [target]="expression" bind-target="expression"  {{ msg }} 
 // 插值表达式  // 属性绑定  // 组件通过属性绑定的方式传参 
 // 样式绑定 Special
 // class绑定  // Attribute绑定  (target)="statement" on-target="statement"  // 元素事件  // 组件事件，用于监听子组件传递过来的参数 click me
 // 指令事件  [(target)]="expression" bindon-target="expression"  // 双向数据绑定

Copy after login

Comparison between HTML attribute and DOM property (very important, strengthen understanding)

Understanding the difference between HTML attribute and DOM attribute is to understand how Angular binding The key to the job. Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes

Some HTML Attributes can be mapped 1:1 to Properties; for example, "id".
Some HTML Attributes do not have corresponding Properties. For example, aria-* colSpan rowSpan.
Some DOM Properties do not have corresponding Attributes. For example, textContent.

It is important to remember that HTML Attributes and DOM Properties are different, even if they have the same name. In Angular, the only purpose of HTML Attributes is to initialize the state of elements and directives.

Template binding uses Properties and events instead of Attributes.

When writing data binding, you are only dealing with the target object's DOM Properties and events.

Note:

This general rule can help you build a mental model of HTML Attributes and DOM Properties: Properties are responsible for initializing DOM properties and then finishing. Property values can change; Attribute values cannot.

There is one exception to this rule. Attributes can be changed via setAttribute(), which then reinitializes the corresponding DOM attributes.

Case 1: input

Copy after login

When the browser renders the input, it creates a corresponding DOM node whose value Property has been initialized to "Sarah ".

When the user enters Sally in the input, the value Property of the DOM element will become Sally. However, if you useinput.getAttribute('value')to view the Attribute value of the HTML, you can see that theattribute remains unchanged- it returns Sarah.

The value attribute of HTML specifies the initial value; the value of DOM is that this property is the current value.

Case 2: Disabled Button

disabled Attribute is another example. The button's disabled Property defaults to false, so the button is enabled.

When you add the disabled Attribute, its mere appearance initializes the button's disabled Property to true, so the button is disabled.

Copy after login

Adding and removing disabled Attribute will disable and enable the button. However, the value of Attribute does not matter, which is why you cannot enable this button by writing stilldisabled.

To control the button's state, set the disabled Property,

Copy after login

Template/Interpolation Expression{{}} (Basic, Mastery)

In addition to binding variables, templates can also bind methods

You can also write some simple logic in templates, such as judgments or operations

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` 变量绑定：{{ title }}
 方法绑定：{{ getVal }}
 方法绑定：{{ getVal2() }}
 简单运算 {{ 1 + 1 }}.
 简单运算 {{ price * 0.7 }}.
 简单运算：{{ gender === 0 ? '男':'女' }}
 与方法结合 {{ price * 0.7 + getVal }}.
 与方法结合 {{ price * 0.7 + getVal2() }}.
 `, }) export class AppComponent { title = "模板绑定"； price = 30; gender = 0; get getVal(): number { //es6新语法,函数可以当做变量来使用 return 20; } getVal2(): number { return 33; } }

Copy after login

When using template expressions, please follow the following guidelines ：

Very simple
Executes quickly
No visible side effects (that is, the logic in the template cannot change the variables of the component)

Attribute binding (basic, mastery)

Binding picture

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `   // 推荐  `, styles: [] }) export class AppComponent { madaoSrc = '../assets/images/madao.jpg'; }

Copy after login

Binding common properties

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `   // 注意colSpan和colspan   name  phone  age  
  张三  13398490594  33  
  李四 15079049984  22  
 
  `, styles: [] }) export class AppComponent { madaoSrc = '../assets/images/madao.jpg'; user = { name: 'madao', pic: this.madaoSrc }; colSpan = 2; isDisabled = false; }

name	phone	age
张三	13398490594	33
李四	15079049984	22

Copy after login

Bind custom properties

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` 一行文字 test title test title `, styles: [] }) export class AppComponent { madaoSrc = '../assets/images/madao.jpg'; customTitle = 'bbb'; }

Copy after login

Use interpolation expressions (not recommended)

Interpolation can also be used Attributes, but the common practice is to use square brackets []. It is recommended that the entire project maintain a unified style

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, styles: [] }) export class AppComponent { madaoSrc = '../assets/images/madao.jpg'; user = { name: 'madao', pic: this.madaoSrc }; }

Copy after login

Style binding (belongs to attribute binding, basic, mastery)

Bind a single style

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `      //false  //false `, styles: [] }) export class AppComponent { theme = 'primary'; isSuccess = true; }

Copy after login

Bind multiple classes

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `        `, styles: [] }) export class AppComponent { btnCls = 'btn btn-primary'; btnCls2 = ['btn', 'btn-success']; btnCls3 = { btn: true, 'btn-info': true }; }

Copy after login

Bind a single style

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` 一段文字
 设置高度
 设置高度
 `, styles: [] }) export class AppComponent {}

Copy after login

Bind multiple styles

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` style1
 style2
 style3
     style3
 `, styles: [] }) export class AppComponent { style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;'; style2 = ['width', '200px', 'height', '50px', 'text-align', 'center', 'border', '1px solid']; // 有问题 style3 = { width: '200px', height: '50px', 'text-align': 'center', border: '1px solid' }; }

Copy after login

Binding priority

A certain class or style binding is more Specifically, the higher its priority
Binding always takes precedence over static properties

Event Binding (Basic, Mastery)

Basic usage

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, styles: [] }) export class AppComponent { onClick() { console.log('onClick'); } }

Copy after login

事件对象

$event 就是原生的事件对象

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, styles: [] }) export class AppComponent { onClick(event: MouseEvent) { console.log('onClick', event.target); //直接用event.target.value会报错，要用类型断言 console.log((event.target as HTMLInputElement).value) } }

Copy after login

事件捕获或事件冒泡

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `   
 //可以在html使用一些简单的语法 
 `, styles: [] }) export class AppComponent { parentClick() { console.log('parentClick'); } chilrenClick(event: MouseEvent) { event.stopPropagation(); //阻止事件冒泡 console.log('chilrenClick'); } }

Copy after login

输入输出属性（主要是子传父，通过自定义事件）

输入属性

子组件

import { Component, Input } from '@angular/core'; @Component({ selector: 'app-root', template: ` Today's item: {{item}} 
` }) export class ItemDetailComponent { @Input() item: string; }

Copy after login

父组件

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { currentItem = 'Television'; }

Copy after login

输出属性

通过 new EventEmitter() 自定义一个事件；
调用 EventEmitter.emit(data) 发出事件，传入数据；
父指令通过监听自定义事件，并通过传入的 $event 对象接收数据。

子组件

import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-root', template: `Add an item:  `, }) export class ItemOutputComponent { @Output() newItemEvent = new EventEmitter(); //子传父，输出属性 addNewItem(value: string) { this.newItemEvent.emit(value); //自定义事件触发 } }

Copy after login

父组件

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  //监听自定义事件 `, }) export class AppComponent { items = ['item1', 'item2', 'item3', 'item4']; addItem(newItem: string) { this.items.push(newItem); } }

Copy after login

在元数据中声明输入和输出属性

固然可以在 @Directive 和 @Component 元数据中声明 inputs 和 outputs,但不推荐提供别名

@Input()和@Output()可以接收一个参数，作为变量的别名，那么父组件中只能用别名绑定

子组件

import { Component, Input, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-root', template: ` Today's item: {{item}} 
` }) export class ItemDetailComponent { @Input('aliasItem') item: string; @Output('newItem') newItemEvent = new EventEmitter(); addNewItem(value: string) { this.newItemEvent.emit(value); } }

Copy after login

父组件

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  //注意是监听的别名 `, }) export class AppComponent { currentItem = 'Television'; items = ['item1', 'item2', 'item3', 'item4']; addItem(newItem: string) { this.items.push(newItem); } }

Copy after login

输入属性一定要用中括号[]绑定？

如果绑定的值是静态的，就不需要[]；为了统一风格尽量用上[]

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { // currentItem = 'Television'; }

Copy after login

双向绑定（基础，掌握）

先决条件

组件的属性绑定
组件的事件绑定
输入和输出（父子组件通信）

基本的双向绑定

子组件

import {Component, OnInit, ChangeDetectionStrategy, EventEmitter, Input, Output} from '@angular/core';@Component({ selector: 'app-sizer', template: `    FontSize: {{size}}px 
 `, styles: [ ], changeDetection: ChangeDetectionStrategy.OnPush })export class SizerComponent implements OnInit { @Input() size: number | string; // 想要用双向绑定语法，output变量名就一定是输入属性名加上Change @Output() sizeChange = new EventEmitter(); constructor() { } ngOnInit(): void { } dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size); } }

Copy after login

父组件

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `  Resizable Text
 `, })export class AppComponent { fontSizePx = 16; }

Copy after login

双向绑定工作原理

为了使双向数据绑定有效，@Output() 属性的名字必须遵循 inputChange 模式，其中 input 是相应 @Input() 属性的名字。例如，如果 @Input() 属性为 size ，则 @Output() 属性必须为 sizeChange 。

上面的 sizerComponent 具有值属性 size 和事件属性 sizeChange。 size 属性是 @Input()，因此数据可以流入 sizerComponent 。 sizeChange 事件是一个 @Output() ，它允许数据从 sizerComponent 流出到父组件。

上面例子，有两个方法， dec() 用于减小字体大小， inc() 用于增大字体大小。这两种方法使用 resize() 在最小/最大值的约束内更改 size 属性的值，并发出带有新 size 值的事件。

简写形式

双向绑定语法是属性绑定和事件绑定的组合的简写形式

Copy after login

表单中的双向绑定

因为没有任何原生 HTML 元素遵循了 x 值和 xChange 事件的命名模式，所以与表单元素进行双向绑定需要使用 NgModel

基本使用

根据之前基本的双向绑定知识，[(ngModel)]语法可拆解为：

名为ngModel的输入属性
名为ngModelChange的输出属性

使用[(ngModule)]双向绑定的前提条件是在模块中引入FormsModule

import {Component} from '@angular/core'; @Component({ selector: 'example-app', template: `  Value: {{ name }}
 Valid: {{ ctrl.valid }}
  `, }) export class SimpleNgModelComp { name: string = ''; setValue() { this.name = 'Nancy'; } }

Copy after login

 上面这行代码相当于：

Copy after login

在表单中的使用

表单中使用[(ngModel)]，需要做下面两件事的其中之一

给控件加上name属性
将ngModelOptions.standalone设为true

Copy after login

注意：表单中使用双向数据绑定，知识点比较多，这里只做简单了解，后续会出专门章节探讨

内置指令

循环指令 *ngFor （非常基础，掌握）

arr:string[] = ['张三','李四','王五']; trackByItems(index: number, item: Item): number { return item.id; }  索引值：{{i}} -- 内容：{{item}} 
 //trackBy一般和长列表一起使用，减少dom替换次数，提升性能  ({{item.id}}) {{item.name}}

Copy after login

条件渲染 *ngIf ngStyle ngClass ngSwitch（非常基础）

isShow: Boolean = true; personState: number = 2; //频繁切换不建议用，频繁加载和移除有较高的性能消耗（重要）

命令模式

// 不频繁切换推荐用

命令模式

// 频繁切换推荐用 currentStyles = { 'font-style': this.canSave ? 'italic' : 'normal', 'font-weight': !this.isUnchanged ? 'bold' : 'normal', 'font-size': this.isSpecial ? '24px' : '12px' };

ngClass

ngStyle

// 使用样式有2种（style.dispaly 和 class.hidden）

style模式

//频繁切换建议用样式

class模式

//匹配多种情况的条件渲染，跟vue的v-if/v-else-if/v-else类似 //适合多种状态，显示一种的情况

工作

吃饭

睡觉

Copy after login

双向数据绑定指令 [(ngModel)]

//Angular不能直接识别ngModel，需要通过引入模块FormsModule来访问 import {FormsModule} from '@angular/forms'; imports: [FormsModule] public name = "张三";  //人工绑定，更好的做法是通过响应式表单绑定  //备选 //属性绑定+事件绑定 = ngModel （重要）

Copy after login

模板引用变量

基本使用

使用井号（#）声明模板引用变量，可以获取DOM 元素、指令、组件、TemplateRef 或 Web Component。

import {Component} from '@angular/core'; @Component({ selector: 'app-tpl-var', template: `   `, }) export class TplVarComponent { constructor() { } callPhone(value: string) { console.log('callPhone', value); } }

Copy after login

ref

还有种写法就是ref, 下面两种写法是一样的

Copy after login

引用组件

在组件章节，介绍了获取子组件的属性和方法，有两种方法：本地变量和@viewChild()

import {Component} from '@angular/core'; @Component({ selector: 'app-tpl-var', template: `    size: {{ size }} 
 `, }) export class TplVarComponent { size = 16; constructor() { } }

Copy after login

输入和输出

输入属性

子组件

import { Component, Input } from '@angular/core'; @Component({ selector: 'app-root', template: ` Today's item: {{item}} 
` }) export class ItemDetailComponent { @Input() item: string; }

Copy after login

父组件

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { currentItem = 'Television'; }

Copy after login

输出属性

子组件

import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-root', template: `Add an item:  `, }) export class ItemOutputComponent { @Output() newItemEvent = new EventEmitter(); addNewItem(value: string) { this.newItemEvent.emit(value); } }

Copy after login

父组件

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { items = ['item1', 'item2', 'item3', 'item4']; addItem(newItem: string) { this.items.push(newItem); } }

Copy after login

在元数据中声明输入和输出属性

固然可以在 @Directive 和 @Component 元数据中声明 inputs 和 outputs, 不推荐提供别名。

@Input()和@Output()可以接收一个参数，作为变量的别名，那么父组件中只能用别名绑定子组件

import { Component, Input, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-root', template: ` Today's item: {{item}} 
` }) export class ItemDetailComponent { @Input('aliasItem') item: string; // decorate the property with @Input() @Output('newItem') newItemEvent = new EventEmitter(); addNewItem(value: string) { this.newItemEvent.emit(value); } }

Copy after login

父组件

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { currentItem = 'Television'; items = ['item1', 'item2', 'item3', 'item4']; addItem(newItem: string) { this.items.push(newItem); } }

Copy after login

输入属性一定要用中括号[]绑定？

如果绑定的值是静态的，就不需要[]

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  `, }) export class AppComponent { // currentItem = 'Television'; }

Copy after login

管道（基础，掌握）

常用的管道

1、大小写字母转换

str = 'Hello'; str1 = 'World'; {{str | uppercase}}-{{str1 | lowercase}} 
 //str:hello str1:WORLD

Copy after login

2、日期格式化（经常使用）

today = new Date(); 现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}

Copy after login

3、保留小数后面多少位下面例子的含义是，3表示最少几位整数，后面的2-4表示最少最少2位小数，最多4位小数，不足补零，小数会四舍五入。

num = 125.156896; num保留4位小数的值是：{{num | number:'3.2-4'}}
 //125.1569

Copy after login

4、货币转换

count = 5; price = 1.5; 数量：{{count}}
 // 数据：5 价格：{{price}}
 // 价格：1.5 总价：{{(price * count) | currency:'￥'}}
 // 价格：￥7.5

Copy after login

5、字符串截取

name = '只对你说'; {{name | slice : 2 : 4}}
 // 你说

Copy after login

6、json格式化(有时需要看一下数据)

{{ { name: 'semlinker' } | json }}
 // { "name": "semlinker" }

Copy after login

自定义管道

1、创建管道文件

ng g pipe /piper/mypiper

Copy after login

2、在管道文件中写自己的逻辑transform两个参数分别表示传入值和参数

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'multiple' }) export class MypiperPipe implements PipeTransform { transform(value: any, args?: any): any { //value:输入值 args:参数 if(!args){//无参的情况下 args = 1; } return value*args; } }

Copy after login

注意：通过命令行生成的管道（过滤器），会自动在全局声明；管道传入的参数是在'：'冒号后面表示

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Let's talk about how to perform data binding on templates in angular10?. For more information, please follow other related articles on the PHP Chinese website!