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 相关文章推荐
简介AngularJS的视图功能应用
Jun 17 Javascript
百度地图api如何使用
Aug 03 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
Node.js简单入门前传
Aug 21 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP链表操作简单示例
2016/10/15 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
消防器材管理制度
2014/01/28 职场文书
师说教学反思
2014/02/07 职场文书
善意的谎言事例
2014/02/15 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2015年超市工作总结范文
2015/05/26 职场文书