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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
JS异步处理的进化史深入讲解
Aug 25 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
如何使用angularJs
2017/05/08 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
node.js获取参数的常用方法(总结)
2017/05/29 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
作文评语集锦大全
2014/04/23 职场文书
法学专业求职信范文
2015/03/19 职场文书
CAD实训总结范文
2015/08/03 职场文书
《分数乘法》教学反思
2016/02/24 职场文书