angular4笔记系列之内置指令小结


Posted in Javascript onNovember 09, 2018

内置指令

内置属性型指令

属性型指令会监听和修改其它HTML元素或组件的行为、元素属性(Attribute)、DOM属性(Property)。

NgClass

形式:[ngClass]="statement"

通过绑定到NgClass,可以同时添加或移除多个类。

setCurrentClasses() {
 this.currentClasses = {
  'saveable': this.canSave,
  'modified': !this.isUnchanged,
  'special': this.isSpecial
 };
}

<div [ngClass]="currentClasses">This div</div>

NgStyle

形式:[ngStyle]="statement"

NgStyle绑定可以同时设置多个内联样式。

setCurrentStyles() {
 this.currentStyles = {
  'font-style': this.canSave   ? 'italic' : 'normal',
  'font-weight': !this.isUnchanged ? 'bold'  : 'normal',
  'font-size':  this.isSpecial  ? '24px'  : '12px'
 };
}

<div [ngStyle]="currentStyles">This div</div>

NgModel

形式:[(ngModel)]="statement"

使用[(ngModel)]双向绑定到表单元素。

<input [(ngModel)]="currentHero.name">

使用 ngModel 时需要 FormsModule

内置结构型指令

NgIf

形式:*ngIf="statement"

<app-hero-detail *ngIf="isActive"></app-hero-detail>

NgFor

形式:*ngFor="statement"

<div *ngFor="let hero of heroes">{{hero.name}}</div>

NgSwitch

形式:[ngSwitch]="statement"

<div [ngSwitch]="currentHero.emotion">
 <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
 <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
 <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
</div>

NgSwitch实际上包括三个相互协作的指令:NgSwitch、NgSwitchCase 和 NgSwitchDefault

模板引用变量 ( #var )

模板引用变量通常用来引用模板中的某个DOM元素,它还可以引用Angular组件或指令或Web Component。

<input #phone placeholder="phone number">

<button (click)="callPhone(phone.value)">Call</button>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
js module大战
Apr 19 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
json数据格式常见操作示例
Jun 13 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 #Javascript
vue.js层叠轮播效果的实例代码
Nov 08 #Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 #Javascript
You might like
PHP 数组基础知识小结
2010/08/20 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python ansible服务及剧本编写
2017/12/29 Python
python 用下标截取字符串的实例
2018/12/25 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
python 追踪except信息方式
2020/04/25 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
大学生物业管理求职信
2013/10/24 职场文书
文员岗位职责范本
2014/03/08 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
幼儿园课题方案
2014/06/09 职场文书
国际贸易求职信
2014/07/05 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2014年司法局工作总结
2014/12/11 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
MySQL sql模式设置引起的问题
2022/05/15 MySQL