Angular学习笔记(一)常用模板语法

文章目录

1. 1. 更新：

Angular模板语法

1. 1. 基本插值语法
2. 2. 模板内的局部变量
3. 3. 单向值绑定
4. 4. 双向绑定
5. 5. *ngIf的用法
6. 6. *ngFor的用法
7. 7. ngSwitch语法
8. 8. ngClass语法
9. 9. ngStyle语法
10. 10. ngModel语法
11. 11. 管道的用法
    1. 11.1. 大小写转换管道
    2. 11.2. 日期管道
    3. 11.3. 小数管道
    4. 11.4. 货币管道
12. 12. 安全取值

typescript相关

1. 1. 装饰器(Decorator)
2. 2. 函数类型定义

之前虽然在跟着官网教程撸了一遍英雄编辑器（Angular练习项目地址），见识到了Angular的魅力，但里边有很多的细节没有搞懂，所以就决定全方位重新认识一下这个重量级框架，归纳总结学习笔记，记录在本博客。

============================

更新：

很久之前练习vue语法时写过一个form表单的例子，这次用本章Angular的知识重写了一下，顺便附上对比
演示地址
源码

============================

配置环境之类就不再赘述，参考上述链接的说明文档或官方教程即可

Angular模板语法

基本插值语法

{{变量|方法|运算}}

模板内的局部变量

示例

<input #heroInput>

用法:

<p>{{heroInput.value}}</p>

或者

<button(click)="sayHello(heroInput.value)">局部变量</button>

单向值绑定

[某属性] = "绑定的值"
示例
<img [src]="imgSrc" />

双向绑定

[(子组件的值)] = "父组件的值"
此时，子组件调用自己的方法改变此值，也会影响到父组件
需要注意的是，子组件要手动定义输入和输出
示例

<p>{{value}}</p>
<font-resizer [(size)]="value"></font-resizer><!-- 子组件 -->

@Input()  size: number | string;   // 输入
@Output() sizeChange = new EventEmitter<number>();  // 输出
// 下面是子组件中更改value的方法
changeValue(delta: number) {
    this.size++;
    this.sizeChange.emit(this.size);    // 仍须手动输出
}

由此可见，Angular和Typescript的设计理念相似，都有一套非常严格的流程把控，这在构建大型应用时很有用

*ngIf的用法

示例：

<p *ngIf="isShow">满足条件才会显示</p>

当变量isShow存在时，这个元素才会显示。
可以在组件中写方法控制这个元素。

*ngFor的用法

示例：
html部分

<ul>
    <li *ngFor="let item of values;let i=index;">
    {{i+1}}：{{item.name}}
    </li>
</ul>

values的值

[
    {name:"嘿嘿"},
    {name:"哈哈"},
    {name:"呵呵"}
]

这样可以就快速渲染出这个列表

ngSwitch语法

示例：

<div [ngSwitch]="mapStatus">
    <p *ngSwitchCase="0">下载中...</p>
    <p *ngSwitchCase="1">正在读取...</p>
    <p *ngSwitchDefault>系统繁忙...</p>
</div>

mapStatus的值决定了要渲染哪个标签

ngClass语法

用途：批量添加类名
示例

<div [ngClass]="klass">klass里设置类名</div>

上述代码中的klass是一个类json对象，属性名为类名，属性值为布尔值
例如{'text-success':true},或稍高级一点的{'text-success':username == 'zxc'}

ngStyle语法

用途：批量添加内联样式
和[ngClass]的语法几乎一模一样
不同之处是它的对象的属性值不再局限于布尔值，也有一些更高级的一点的写法了，例如{'color':username === 'zxc' ? 'green' : 'red' }

ngModel语法

只能用于表单类元素上，效果类似于上边的双向绑定
示例：

<input [(ngModel)]="value">
<p>{{value}}</p>

除了需要在类里定义一下value这个变量,其它的什么都不用做，p标签的内容会随着输入框的值变动

管道的用法

通常我们需要使用管道实现对数据的格式化，下面说一些常用的管道。

大小写转换管道

uppercase将字符串转换为大写
lowercase将字符串转换为小写

<p>将字符串转换为大写{{str | uppercase}}</p>

str:string = 'hello'

日期管道

日期管道符可以接受参数，用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today:Date = new Date();

小数管道

number管道用来将数字处理为我们需要的小数格式
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1
最少小数位数默认为0
最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时，会自动补0
当小数位数多于规定的{最多小数位数}时，会四舍五入

<p>圆周率是{{pi | number:'2.2-4'}}</p>

pi:number = 3.14159;

输出：圆周率是03.1416

货币管道

currency管道用来将数字转换为货币格式

<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>

a:number = 8.2515
b:number = 156.548

输出：USD8.25,0156.55
这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示符，当为true时，则显示$符。后面的规定小数位数的参数和上面介绍的一样。

安全取值

示例：

<p>{{person?.name}}</p>

如果没有person，值就不会渲染

typescript相关

装饰器(Decorator)

概念：

一个求值结果为函数的表达式，接受目标对象、名称和装饰器描述作为参数，可选地返回一个装饰器描述来安装到目标对象上。

装饰器可以用来注解类，属性，方法和参数(须在顶部引用)
示例：

@Component({
  selector: '选择器标签(模板的标签名)',
  templateUrl: '模板的html路径',
  styleUrls: ['模板的css路径，可插入多个']
})

函数类型定义

示例

getAbc():string{
    return 'abc'
}

这里定义string的意思是此函数的返回值是string类型，
如果是其它类型或不返回值则会报错，
如果不确定它的类型应定义为any，
如果不返回数据应定义为void。