Angular基础知识系列学习（二）--Angular模板语法、插值语法、事件绑定

Angular从入门到放弃秘籍

第一篇Angular的介绍以及基本环境搭建

第二篇Angular模板语法、插值语法、事件绑定

第三篇Angular内置基本指令介绍

第四篇Angular组件的创建、组件声明周期钩子函数

第五篇Angular父子组件传值，父传子，子传父，组件之间

第六篇Angular请求数据

第七篇Angular路由介绍、两种路由传参

前言

这个系列博客主要从Angular基础入手到入门在到一个后台应用的开发，学习过程中会不断将代码提交到下面仓库，感兴趣的朋友可以相互学习。https://github.com/houcw/my-angular-app.git
.

---

Angular模板语法、插值语法、事件绑定

1.插值语句

（示例）：

		介绍：
            插值语句就是讲从后台获取的数据在前端页面动态的展示出来。
        实现方式：
            Angular和Vue实现的方式相同，都是通过'{{...}}'来进行插值
        说明：
            花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值。

2.管道

（示例）：

 		介绍：
            Angular管道语法是针对字符串。货币。日期等一些特定的数据进行格式转换，管道可以认为是一个简单的函数，接收模板中的数据，然后通过自身的处理，返回特定格式数据，类似Vue的过滤器。
        Angular内置管道：
            DatePipe：根据本地环境中的规则格式化日期值。
            UpperCasePipe：把文本全部转换成大写。
            LowerCasePipe ：把文本全部转换成小写。
            CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
            DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
            PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。
        使用方法：
            <p>日期转换 {{ birthday | date:"MM/dd/yy" }}</p>
        通过函数使用管道：
            html模板中：
                <p>The hero's birthday is {{ birthday | date:format }}</p>
                <button (click)="toggleFormat()">改变格式</button> 

            ts文件中：

            export class BirthdayComponent {
                birthday = new Date(1988, 3, 15);
                toggle = true; 
                get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
                toggleFormat() { this.toggle = !this.toggle; }
            }
        说明：
            点击'改变格式'按钮之后，会触发toggleFormat()函数，ts中的toggleFormat会改变返回模板的format值，展示出不同的日期格式，值两种shortDate和fullDate，之间切换

3.属性绑定

（示例）：

 		介绍：
            Angular 中的属性绑定可帮助你设置 HTML 元素或指令的属性值，可以动态绑定HTML标签内置的属性。使用属性绑定，你可以执行诸如切换按钮、以编程方式设置路径，以及在组件之间共享值之类的功能。
        绑定方法：
            要绑定到元素的属性，请将其括在方括号 [] 内，该括号会将属性标为目标属性。目标属性就是你要对其进行赋值的 DOM 属性。
        实现语法：
            html模板中:
                <img [src]="itemImageUrl">
                <button [disabled]="isUnchanged">Disabled Button</button>
            ts中：
                itemImageUrl = '../assets/phone.png';
                isUnchanged = true
        注意：
            特定的属性要进行大小写的区分比如：
                <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
                <span [innerHTML]="evilTitle"></span>

4.Attribute 绑定、类绑定和样式绑定

（示例）：

 		1.Attribute 绑定
            介绍：
                Angular 中的 Attribute 绑定可帮助你直接设置 Attribute 值。使用 Attribute 绑定，你可以提升无障碍性、动态设置应用程序样式以及同时管理多个 CSS 类或样式。
            实现：
                html模板：
                    <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
                ts：
                    actionName可以动态设置
        2.类绑定
            介绍：
                分为单个类绑定和多个类绑定，可以动态的从元素的Attribute中修改css类名
            1.单个类：
                html模板中：
                    [class.sale]="onSale"
                    通过变量onSale来控制类sale是否添加或删除
            2.多个类：
                html模板中：
                    [class]="classExpression"
                    classExpression可以是多个类名，设置之后类名对应的样式按照顺序出现
                实现：
                    <div [calss]="my-class-1 my-class-2 my-class-3"></div>
                    或者
                    [class]={class1:true,class2:false}
                    或者
                    [class]=[class1,class2]

        3.样式绑定
            介绍
                样式绑定分为三种方式：
            1.绑定到单一样式：
                [style.width]="width"
            2.绑定到带单位的单一样式：
                [style.width.px]="width"
            3.绑定到多个样式：
                [style]="width: 100px; height: 100px"
                [style]={width: '100px', height: '100px'}
                [style]=['width', '100px']

5.事件绑定

（示例）：

 		介绍：
            通过事件绑定，你可以侦听并响应用户操作，例如击键、鼠标移动、点击和触摸。
        实现：
            html模板：
                <button (click)="onSave()">Save</button>
            ts文件
                onSave(){
                    console.log('save)
                }

6.双向绑定

（示例）：

        介绍：
            双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。
        实现：
            <app-sizer [(size)]="fontSizePx"></app-sizer>
        实现方式：
            html模板：
                <div>
                    <button (click)="dec()" title="smaller">-</button>
                    <button (click)="inc()" title="bigger">+</button>
                    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
                </div>
            ts模板
                export class SizerComponent {
                    @Input()  size: number | string;
                    @Output() sizeChange = new EventEmitter<number>();

                    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);
                    }
                }

---

总结

这篇文章主要是介绍了Angular模板语法、插值语法、事件绑定的解释，下篇继续