angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:
https://www.angular.cn/guide/template-syntax
http://www.ngfans.net/topic/12/post/2
系列目录
(1)组件详解之模板语法
(2)组件详解之组件通讯
(3)内容投影, ViewChild和ContentChild
(4)指令
(5)路由
章节目录
1插值语法和表达式
2在模板内部定义变量
3值绑定,事件绑定,双向绑定
4内置结构型指令*ngIf,*ngFor,ngSwitch
5内置属性型指令:NgClass,NgStyle
6管道与安全导航
7导入Bootstrap和fontawesome
Angular在模板引擎里面对这些最基本的东西做了很强的支持,所以它的模板表达能力是非常强的
1插值语法和表达式
类似前端模板引擎handlebars等的语法
能够插入定义的变量,简单的加减乘除等数学运算和调用方法
定义的变量:{{str}}
简单数学运算:1+1={{1+1}}
调用方法:{{getValue()}}
2在模板内部定义变量
我们既可以在组件内部定义变量,也可以模板内部定义变量
通过#自动生成一个局部变量,给标签命名,可以在组件内部和模板内部传递
{{inputVal.value}}
3值绑定,事件绑定,双向绑定
值绑定
在模板内部,一些标签的某些属性不是固定的,会根据不同的情形变化,例如照片的src属性,
我们可以通过值绑定(用[]表示),将它绑定到变量上,随着变量值的改变而改变
事件绑定
在模板内部,某些操作会触发事件,例如点击按钮
我们可以通过事件绑定(用()表示),将它绑定到指定事件上
![]()
双向绑定
什么是双向绑定呢?指的是界面的操作能实时反映到数据，数据的变更能实时展现到界面。
双向绑定用[()]来表示,常见的双向绑定有NgModel,它仅用于表单类元素上面
{{str}}
组件内部修改数据能够实时反应到界面,界面上的修改也能实时传递到组件内部
4内置结构型指令*ngIf,*ngFor,ngSwitch:
*ngIf
在模板内部来判断元素是否存在,它不是用display:none或者class=hide等显示隐藏的方式,而是直接删除,所以为真即存在,为假即删除
它既可以是已经定义的变量,也可以是语句
为false不显示
变量控制是否显示
*ngFor
作用如其名,用于遍历数组
-
{{i+1}}:{{item.value}}
ngSwitch
神似其他语言里面的条件语句switch case,代码如下
值为1
值为2
值为3
值为4
值为5
默认值10
5内置属性型指令:NgClass,NgStyle
NgClass和NgStyle都是用来通过代码控制标签样式
NgClass
得先写好样式文件,通过代码切换不同的样式
用NgClass添加样式类
special是已经写好的样式类
NgStyle
不需要先写好样式文件,能够细节的去处理样式
用NgStyle控制内联样式
6管道与安全导航
管道
当我们有数据需要做格式转换的时候,管道是很好的选择,因为它速度快,能复用
管道符号用|表示,例如x | y,把x作为参数传到y中处理,当然可以 x | y | z,它能够级联使用
例如时间的处理
{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
安全导航
很多时候我们在使用某个对象变量的时候,如果这个对象为null或者undefined,当我们直接点它下面的属性,就会报错
对于这种情况,常用的解决方法是三元操作,先判断一下这个对象
相比于三元操作,有更加优秀的解决方法
{{Obj?.value}}
它会先判断Obj,如果为null或者undefined,不会直接报错
7 导入Bootstrap和fontawesome
首先在配置文件package.json dependencies下添加依赖的模块
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
然后在src文件夹下的style文件里面添加
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";
这样就可以在模板内部使用它们了
(终)
文档信息
- 发表作者： 半路独行
- 发表出处： 博客园
- 原文地址： https://www.cnblogs.com/banluduxing/p/9290208.html
- 版权信息：
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。
转载于:https://www.cnblogs.com/banluduxing/p/9290208.html