原文地址

https://www.jianshu.com/p/5a5b43a8e91f

大纲

  1、angular指令的分类
  2、angular指令之——组件
  3、angular指令之——属性指令 (ngStyle、ngClass)
  4、angular指令——结构指令(ngIf、ngFor、ngSwitch、NgTemplateOutlet、NgPlural、NgPluralCase)

angular指令的分类

  Angular 2 的指令分为以下三种:
    组件(Component directive):用于构建UI组件,继承于 Directive 类
    属性指令(Attribute directive): 用于改变组件的外观或行为
    结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局

angular指令之——组件

  组件本质上其实就是一个指令,用于构建UI,因此常可以用一些指令来构建一些经常会用到的页面构件或者通过指令来编辑页面。

angular指令之——属性指令

1.ngStyle指令: 用于设定给定 DOM 元素的 style 属性

<!--绑定常量-->
<div [ngStyle]="{'background-color': 'green'}"></div>
<!--绑定表达式 -->
<div [ngStyle]="{'background-color': person.country === 'UK' ? 'green' : 'red'}"></div>

2.ngClass指令:用于动态的设定 DOM 元素的 CSS class

<!--绑定常量 -->
<div [ngClass]="{'text-success': true }"></div>
<!--绑定表达式 -->
<div [ngClass]="{'text-success': person.country === 'CN'}"></div>

angular指令——结构指令

1.ngIf指令:根据表达式的值,显示或移除元素

<div *ngIf="person.country === 'CN'">{{ person.name }}</div>

2.ngFor指令:使用可迭代的每个项作为模板的上下文来重复模板,类似于 Ng 1.x 中的 ng-repeat 指令

<div *ngFor="let person of people">{{person.name}}</div>
<!--
在一些包含复杂项目的列表中,每次更改会引起很多相互关联的DOM操作,
这里使用NgFor指令会让性能变差。在服务器上重新拉取数据时,
拉取的数据可能包含很多之前显示过的数据,
但Angular并不知道哪些列表数据在数据更新前已经显示过,哪些没有显示过,
只能清除旧列表的DOM元素,并用新的列表数据填充DOM元素来重建一个新列表。
这个情况下可以用追踪函数来避免这种重复渲染。
<ul>
<li *ngFor="let fruit of fruitsList,let i=index">{{fruit}}</li>
</ul>
-->
<script>
//追踪函数
trackByFruits(index:number,fruit:Fruit){
return fruit.id;
}
</script>
<ul>
<li *ngFor="let fruit of fruitsList,trackBy:trackByFruits">{{fruit}}</li>
</ul>

3.ngSwitch指令:它包括两个指令,一个属性指令和一个结构指令。它类似于 JavaScript 中的 switch 语句

<ul [ngSwitch]='person.country'>
<li *ngSwitchCase="'UK'" class='text-success'>
{{ person.name }} ({{person.country}})
</li>
<li *ngSwitchCase="'USA'" class='text-secondary'>
{{ person.name }} ({{person.country}})
</li>
<li *ngSwitchDefault class='text-primary'>
{{ person.name }} ({{person.country}})
</li>
</ul>

4.NgTemplateOutlet

<!--
NgTemplateOutlet指令可以在模板中中创建内嵌视图。
使用NgTemplateOutlet,需要为指令绑定一个队模板元素的引用。
也就是说,使用NgTemplateOutlet指令时,需要在组件中声明一个模板元素的引用,
并将这一变量绑定给指令作为输入属性。
NgTemplateOutlet指定的基本用法:
-->
<template [ngTemplateOutlet]="templateRefExpression"><template>
<!--
除此之外,还可以为被插入的内嵌视图绑定一个上下文对象。
NgTemplateOutlet指令有一个ngOutletContext属性,
通过给ngOutletContext属性绑定输入变量,
可以将当前模板中获取的上下文对象绑定到被插入的内嵌视图中。
-->
<template [ngTemplateOutlet]="templateRefExpression"
ngOutletContext="objectExpression"><template>

5.NgPlural、NgPluralCase

<!--
NgPlural、NgPluralCase是一组搭配使用的指令。
NgPlural是一个国际化指令,其作用和NgSwitch指令类似,
可以看作是NgSwitch指令的一种变种,NgPluralCase指令可以类比NgSwitchCase类理解。
Ngplural与NgSwitch的指令差异体现在:使用NgPlural指令需要继承NgLocalization类并
实现getPluralCategory()方法,在这一方法中,根据具体的分类需求,
将落在某一个范围的值命名的一个分类,并将分类名称返回,而返回的分类,
可以个[ngPlural]绑定值进行匹配,当值属于这一分类的定义范围时,就当匹配成功。
所以,NgSwitch指令只能进行精确匹配,而NgPlural指令除了进行精确匹配外,
还可以进行范围匹配。
-->
<script>
import {Component} from '@angular/core';
@Component({
selector: 'ng-plural',
template: `
<p>{{value}}</p>
<button (click)="inc()">增加</button>
<div [ngPlural]="value">
<template ngPluralCase="=0">0</template>
<template ngPluralCase="=1">1</template>
<template ngPluralCase="other">其他</template>
</div>
`
})
export class NgPluralExample {
value: any= 'init';
inc() {
this.value = this.value === 'init' ? 0 : this.value + 1;
}
}
</script>

代码网址

angular的实例教程中的angular-directive

参考网址

指令
angular内置指令

angular内置指令相关知识的更多相关文章

  1. Angular内置指令(一)

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  2. Angular内置指令

    记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...

  3. Angular——内置指令

    内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否 ...

  4. Angular内置指令(二)

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

  5. Vue源码后记-其余内置指令(1)

    把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  6. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...

  7. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  8. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  9. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

随机推荐

  1. 小米开源文件管理器MiCodeFileExplorer-源码研究(7)-Favorite收藏管理和SQLite数据库CRUD

    FavoriteDatabaseHelper,存储favorite数据,到SQLite数据库.SQLiteOpenHelper是一个帮助管理数据库和版本的工具类.通过继承并重载方法,快速实现了我们自己 ...

  2. 【习题 8-1 UVA - 1149】Bin Packing

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个背包只能装两个东西. 而且每个东西都要被装进去. 那么我们随意考虑某个物品.(不必要求顺序 这个物品肯定要放进某个背包里面的. ...

  3. Spring 实现数据库读写分离(转)

    现在大型的电子商务系统,在数据库层面大都采用读写分离技术,就是一个Master数据库,多个Slave数据库.Master库负责数据更新和实时数据查询,Slave库当然负责非实时数据查询.因为在实际的应 ...

  4. 下载新浪android SDK

    下载新浪android SDK 必须去官网 开放平台下载 http://open.weibo.com/ 下载SDK 点击进入之后,看到的界面例如以下: 然后下载android SDK就可以.假设基于别 ...

  5. POJ 2481 Cows (线段树)

    Cows 题目:http://poj.org/problem?id=2481 题意:有N头牛,每仅仅牛有一个值[S,E],假设对于牛i和牛j来说,它们的值满足以下的条件则证明牛i比牛j强壮:Si &l ...

  6. oracle跨数据库跨用户訪问注意事项

    java代码中不同意出现oracle的username.数据链路名. 跨用户.跨数据库的訪问必须在oracle中建同义词或视图来实现.在java代码中仅仅需当做当前用户下的对象处理.

  7. 測试CPU支持指令集AVX,AVX2,SSE情况的代码【VS2010调试通过】

    完整代码例如以下所看到的 http://download.csdn.net/detail/vbskj/7723827 本人的測试结果 watermark/2/text/aHR0cDovL2Jsb2cu ...

  8. libev环境

    wget https://download.libsodium.org/libsodium/releases/libsodium-1.0.13.tar.gz tar xzvf libsodium-1. ...

  9. 洛谷P1043 数字游戏

    题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共n个),你要按顺序将其分 ...

  10. libcurl 上传文件至 web服务器

    测试环境搭建, 使用 wamp server (windows下的 apache+MySQL+php) libcurl vc6 工程代码  下载地址:  http://download.csdn.ne ...