angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:
系列目录
(1)组件详解之模板语法
(2)组件详解之组件通讯
(3)内容投影, ViewChild和ContentChild
(4)指令
(5)路由
章节目录
1插值语法和表达式
2在模板内部定义变量
3值绑定,事件绑定,双向绑定
4内置结构型指令*ngIf,*ngFor,ngSwitch
5内置属性型指令:NgClass,NgStyle
6管道与安全导航
7导入Bootstrap和fontawesome
Angular在模板引擎里面对这些最基本的东西做了很强的支持,所以它的模板表达能力是非常强的
1插值语法和表达式
类似前端模板引擎handlebars等的语法
能够插入定义的变量,简单的加减乘除等数学运算和调用方法
<p>定义的变量:{{str}}</p>
<p>简单数学运算:1+1={{1+1}}</p>
<p>调用方法:{{getValue()}}</p>
2在模板内部定义变量
我们既可以在组件内部定义变量,也可以模板内部定义变量
通过#自动生成一个局部变量,给标签命名,可以在组件内部和模板内部传递
<input #inputVal>
<p>{{inputVal.value}}</p>
<button class="btn btn-success" (click)="print(inputVal.value)">打印</button>
3值绑定,事件绑定,双向绑定
值绑定
在模板内部,一些标签的某些属性不是固定的,会根据不同的情形变化,例如照片的src属性,
我们可以通过值绑定(用[]表示),将它绑定到变量上,随着变量值的改变而改变
事件绑定
在模板内部,某些操作会触发事件,例如点击按钮
我们可以通过事件绑定(用()表示),将它绑定到指定事件上
<img [src]="imgSrc" />
<button (click)="changeImgSrc()">
将事件changeImgSrc()绑定到button上来,
修改imgSrc变量的值,改变img标签通过值绑定的src属性的值
</button>
双向绑定
什么是双向绑定呢?指的是界面的操作能实时反映到数据,数据的变更能实时展现到界面。
双向绑定用[()]来表示,常见的双向绑定有NgModel,它仅用于表单类元素上面
<input [(ngModel)]="str">
<p>{{str}}</p>
<button (click)="changeStr()"></button>
组件内部修改数据能够实时反应到界面,界面上的修改也能实时传递到组件内部
4内置结构型指令*ngIf,*ngFor,ngSwitch:
*ngIf
在模板内部来判断元素是否存在,它不是用display:none或者class=hide等显示隐藏的方式,而是直接删除,所以为真即存在,为假即删除
它既可以是已经定义的变量,也可以是语句
<p *ngIf="1>=2">为false不显示</p>
<p *ngIf="isShow">变量控制是否显示</p>
*ngFor
作用如其名,用于遍历数组
<ul>
<li *ngFor="let item of arr;let i=index;">
{{i+1}}:{{item.value}}
</li>
</ul>
ngSwitch
神似其他语言里面的条件语句switch case,代码如下
<span [ngSwitch]="num">
<span *ngSwitchCase="'1'">值为1</span>
<span *ngSwitchCase="'2'">值为2</span>
<span *ngSwitchCase="'3'">值为3</span>
<span *ngSwitchCase="'4'">值为4</span>
<span *ngSwitchCase="'5'">值为5</span>
<span *ngSwitchDefault>默认值10</span>
</span>
5内置属性型指令:NgClass,NgStyle
NgClass和NgStyle都是用来通过代码控制标签样式
NgClass
得先写好样式文件,通过代码切换不同的样式
<p [ngClass]="{'special':true}">用NgClass添加样式类</p>
special是已经写好的样式类
NgStyle
不需要先写好样式文件,能够细节的去处理样式
<p [ngStyle]="{'color':1>2?'red':'blue'}">用NgStyle控制内联样式</p>
<div [ngStyle]="{'background-image': 'url('+x.ImgUrl+')','width':'100%','height':'120px','background-size':'cover'}">
6管道与安全导航
管道
当我们有数据需要做格式转换的时候,管道是很好的选择,因为它速度快,能复用
管道符号用|表示,例如x | y,把x作为参数传到y中处理,当然可以 x | y | z,它能够级联使用
例如时间的处理
<p>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</p>
安全导航
很多时候我们在使用某个对象变量的时候,如果这个对象为null或者undefined,当我们直接点它下面的属性,就会报错
对于这种情况,常用的解决方法是三元操作,先判断一下这个对象
相比于三元操作,有更加优秀的解决方法
<p>{{Obj?.value}}</p>
它会先判断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 国际许可协议进行许可。
感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接。
Angular6 学习笔记——组件详解之模板语法的更多相关文章
-
Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
-
Angular6 学习笔记——路由详解
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
-
Android学习笔记-Dialog详解
1.对话框的使用 1.1AlertDialog的显示 简单对话框以及监听的设置:重点掌握三个按钮(也就是三上单词): PositiveButton(确认按钮);NeutralButton(忽略按钮) ...
-
JavaScript学习笔记-实例详解-类(二)
实例详解-类(二) //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...
-
JavaScript学习笔记-实例详解-类(一)
实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...
-
C++并发与多线程学习笔记--unique_lock详解
unique_lock 取代lock_quard unique_lock 的第二个参数 std::adopt_lock std::try_to_lock std::defer_lock unique_ ...
-
[CSS3] 学习笔记-选择器详解(三)
1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...
-
[CSS3] 学习笔记-选择器详解(二)
1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...
-
Linux学习笔记之详解linux软连接和硬链接
0x00 链接文件 Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [软连接] 另外一种连接称之为符 ...
随机推荐
-
python 学习笔记十三 JQuery(进阶篇)
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 安装jQuery 有两个版本的 jQuery 可供下载: Production versio ...
-
JavaScript / 本地存储
cookie 首先让我们先了解一下,什么是cookie,cookie是浏览器提供的一种机制,他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制,但cook ...
-
mysql配置记录
[mysqld] datadir=/app/data/mysql socket=/app/data/mysql/mysql.sock symbolic-links=0 validate_passwor ...
-
解决java新开页面被拦截的问题
在开发中遇到from表单利用 target="_blank" 属性新开页面时被拦截. 用ajax让form表单提交,这时有可能浏览器会拦截新开页面,这时只 需要设置 ajax 同步 ...
-
Mysql中NUMERIC和DECIMAL类型区别比较
decimal(numeric ) 同义,用于精确存储数值 . decimal 数据类型最多可存储 38 个数字,所有数字都能够放到小数点的右边.decimal 数据类型存储了一个准确(精确)的数字表 ...
-
Keil uVision4 创建51单片机工程
Keil uVision4 创建51单片机工程 版权声明:未经授权,严禁转载! 在学习51单片机的过程当中,我们需要使用 Keil uVision4 来创建一个项目,今天就来图示一下创建的流程. 首先 ...
-
python简单实现目录对比
[root@localhost python]# cat dircmptest.py #!/usr/bin/python import filecmp path1="/root/python ...
-
Apache-Axis小结
以前用过axis, 不过好久不弄, 有忘记了.很多很多东西放在收藏夹里面, 但是长时间不去看,结果就是还是不熟悉!现在再简单总结一下吧. Axis开发服务器端webservice其实很简单. 1 下载 ...
-
修改profile出错后的补救
修改profile出错后的补救,谢天谢地export命令还能用 今天在鼓捣centOS的时候,一不小心把用户配置文件profile给改错啦.重启之后进不了图形界面,终端里的命令也有大半不好使啦. 我试 ...
-
快速排序(java)
快速排序是冒泡排序的优化,是一种非常高效的排序, 甚至是目前为止最高效的排序,其思想是这样的:设数组a中存放了n个数据元素,low为数组的低端下标,high为数组的高端下标,从数组a中任取一个元素(通 ...