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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
node.js中的require使用详解
Dec 15 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
化学相关工作求职信
2013/10/02 职场文书
创业计划书模版
2014/02/05 职场文书
交通事故调解协议书
2014/04/16 职场文书
班级活动总结格式
2014/08/30 职场文书
销售人才自我评价范文
2014/09/27 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
民事答辩状格式范文
2015/05/21 职场文书
工资证明格式模板
2015/06/12 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python