Angular模版篇

Angular 模板

什么是模板

       在 Angular 中,组件扮演着控制器或视图模型的角色,模板则扮演视图的角色。模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生产各种各样的网页。在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是适用的,但<script>标签是被禁止的,主要是为了防止JavaScript脚本注入攻击(XXS)。同时一些HTML元素在模板中并不起什么作用,比如<html>、<body>、<base>等。除此之外,Angular中可以通过组件和指令对模板的HTML元素进行扩展,这些扩展将以新的元素或属性的形式出现。

模板表达式

       模板表达式类似于JavaScript语言的表达式,绝大部分的JavaScript表达式都是合法的模板表达式。模板表达式应用在插值语法的双大括号中和属性绑定“=”右侧的引号中。Angular会执行这个表达式并将值分配给一个绑定目标的属性,这个绑定目标可能是一个HTML元素、组件或者指令。

注意不能为一下几种情况:

  1. 带有new运算符的表达式。
  2. 赋值表达式(=、+=、-=)等。
  3. 带有;或者,的链式表达式。
  4. 带有自增和自减操作(++/--)的表达式
  5. 不支持位运算符(| 和&)

还能使用三元表达式

<p [style.color]="isColor ? 'blue' : 'black'">daocheng</p>

语法大全

1506273768(1).png
1506273788(1).png

数据绑定

Angular中不论是从组件控制器中的属性绑定到模板上,还是从模板中的事件反映到控制器中,它们都默认是单向的。

1.插值表达式

语法:{{ }},也是单向绑定

2.事件绑定

数据从模板流向组件类。在事件绑定中,Angular通过监听用户操作事件,比如键盘事件、鼠标事件等来执行其对应绑定的方法。事件绑定的语法是由“=”左侧小括号内的目标事件和“=”右侧引号中的目标语句组成。示例 (click)=”onClick”

类型

  1. 绑定自定义事件。场景:子组件@Output发射出来的事件。
  2. DOM原生事件。事件一览表https://developer.mozilla.org/zh-CN/docs/Web/Events
3.属性绑定

在学习属性绑定前先来了解一对非常重要的概念,即DOM对象属性(Property)与HTML标签特性(Attribute)。在英语中Property和Attribute都可以译为‘属性’,名字虽然相同,但在模板中意义却大有不同。

两者的区别和联系还体现在以下两个方面:

  1. 大多数情况下,DOM对象属性与HTML标签特性并不是一一对应的,但有少量属性即是DOM对象属性又是HTML标签特性,如id、title、class等。
  2. 通常HTML标签特性代表初始值,初始化以后就不发生改变,而DOM元素对象属性代表当前值,其默认为初始值但是会随着改变。

实际的使用:大多数情况我们都是绑定DOMProperty属性,而有些特例你只能绑定attr(colspan,我们table中的标签属性)[attr.colspan]

4.双向数据绑定

我们经常需要显示数据属性,并在用户作出更改时更新该属性。
在元素层面上,既要设置元素属性,又要监听元素事件变化。
Angular 为此提供一种特殊的双向数据绑定语法:[(x)]。 [(x)]语法结合了属性绑定的方括号[x]和事件绑定的圆括号(x)。

原理:
一个 @Input xxx 加上 @Output xxxChange,构成 [( xxx )];

5.模板引用变量

模板引用变量通常用来引用模板中的某个DOM元素,它还可以引用Angular组件或指令或Web Component。示例:使用井号 (#) 来声明引用变量。也可以使用ref-前缀代替。

6.模板表达式操作符
  1. 管道操作符 ( | )
  2. 安全导航操作符 ( ?. ) 和空属性路径
  3. 非空断言操作符 ( ! ) //需要特点的场景

管道

在Angular中,管道(Pipes)可以按照开发者指定的规则将模板内的数据进行转换。如日期类型(Date),默认会显示为Mon Sep 18 2017 17:16:11 GMT+0800 (中国标准时间)这样的形式,但不如Sep 18,2017这样的形式直观,此时可以借助管道来实现这种转换效果。

1. 管道介绍

使用管道,需要用管道操作符 | 来连接模板表达式中左边的输入数据和右边的管道,示例:{{birthday | date }}

2.管道参数

管道可以使用参数,示例:

{{birthday | date:”y/MM/dd” }} 通过传入的参数来输出不同格式的数据
y代表年, M代表月份,d代表天, H代表小时,m代表分钟,s代表秒

3.链式管道

一个模板表达式可以连续使用多个管道进行不同的处理,这就是链式管道。使用链式管道可以展示更丰富的数据格式,语法格式如下所示:
{{birthday | date| uppercase}}

4.常用内置管道

1.DatePipe ( 用来格式化一个日期数据 )

2.JsonPipe ( 通过JSON.stringify()来将输入数据对象转换成对象字符串,主要用于开发调试。示例:{{jsonObject | json }} )

3.DecimalPipe ( 用于对数值的整数与小数部分按照指定规则进行格式化,这种格式化方式也称为本地格式化处理,示例:
expression| number[: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}]
)

4.内置管道全家福:( linkhttps://www.angular.cn/api?type=pipe )

5.自定义管道

虽然Angular提供了许多内置的管道,但是数据转换涉及各种各样的格式,内置管道显然无法满足全部需求,因此我们需要使用Angular提供的自定义管道功能来实现更多的需求。
命令:ng g p xxx

步骤:

  1. 新建一个pipe, ng g p sexreform
  2. Angular就会在根模块中进行处理。
  3. 实现一个transform的方法,第一个参数是被管道的值,第二个参数是我们的管道参数(可选)。需要返回被处理完之后的值

注意:

  1. @Pipe装饰器装饰的。
  2. name元数据的值决定了管道的使用名称。
  3. ==管道并不会改变原始数据的值,只是进行了一个格式化==

6.管道分类

==纯管道==:Angular只有在它检测到输入值发生了纯变更时才会执行纯管道。纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改,或者对对象引用(Date、Array、Function、Object)的更改。

==非纯管道==:Angular会在每个组件的变更检测周期中执行非纯管道。非纯管道可能会被调用很多次,和每个按键或每次鼠标移动一样频繁。示例:| async(Rxjs中会提到)

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 124,645评论 18 136
  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 3,200评论 0 3
  • 模板表达式“{{}}”不能引用任何全局命名空间中的成员(如:window、document等等)的原因: 我想原因...
    科研者阅读 667评论 2 4
  • Angular 2架构总览 - 简书http://www.jianshu.com/p/aeb11061b82c A...
    葡萄喃喃呓语阅读 1,167评论 2 13
  • 【文 | 一棵花白】 ■1 微博满屏都是何洁被出轨了。 对她的记忆还停留在“在夜深人静的时候/想起他/送的那些花/...
    一棵花白阅读 794评论 7 12
  • 今天看到一则新闻,12年前由于一场特大高速交通事故,四车爆炸,年仅8岁的刘朝失去了父亲、继母和妹妹,成了这场悲惨事...
    亭子文阅读 131评论 0 2
  • 问题可以看作是一把把锁头。 元认知可以看作是操作系统里面的弹出窗口。 解决问题的过程就是找到钥匙打开锁头的过程。 ...
    sword夜精灵阅读 422评论 0 0
  • “有!齐悦最喜欢阿猛了!” 这几天在重温恶魔在身边。 只是突然想起,就拾起来看了。真的好怀念阿猛好怀念齐悦喔。他们...
    栗栗子的秋天阅读 123评论 0 0