原文地址

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. 【hdu 3987】Harry Potter and the Forbidden Forest

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=3987 [Description] 给出一张有n个点的图,有的边又向,有的边无向,现在要你破坏一些路 ...

  2. 洛谷——P2957 [USACO09OCT]谷仓里的回声Barn Echoes

    https://www.luogu.org/problem/show?pid=2957 题目描述 The cows enjoy mooing at the barn because their moo ...

  3. STL_算法_查找算法(search、find_end)

    C++ Primer 学习中. .. 简单记录下我的学习过程 (代码为主) search          //从左往右找第一个符合条件的子区间    全部容器适用 find_end  //从右往左找 ...

  4. HDU 2102 A计划 (三维的迷宫BFS)

    题目链接:pid=2102">传送门 题意: 三维的一个迷宫,起点在第一层的S(0,0,0)处,问是否能在规定的时间内走到第二层的P 处.'*'代表不能走,'.'代表能够走,'#'代表 ...

  5. Hibernate之关于多对多单向关联映射

    [Hibernate]之关于多对多单向关联映射 老师和学生,最典型的多对多关联, Teacher和Student.所谓单向意思就是说.老师知道自己的教的是哪些学生而学生不知道是哪些老师教. 也能够这么 ...

  6. 6.Windows 二进制文件 (.exe)安装--终端安装

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/n ...

  7. Python 之Numpy应用

    NumPy 数据类型 numpy 支持的数据类型比 Python 内置的类型要多很多,基本上可以和 C 语言的数据类型对应上,其中部分类型对应为 Python 内置的类型.下表列举了常用 NumPy ...

  8. 二、Docker基础操作

    原文:二.Docker基础操作 一.下载镜像 命令:docker pull xxxxxx(镜像名) docker pull training/weapp 二.运行镜像 docker run -d -P ...

  9. eclipse4.3怎么集成jadclipse追踪源代码,现在windows-preferences-java

      A.将net.sf.jadclipse_3.2.4.jar复制到D:\leaf\eclipse\plugins目录下.  B.在d:\leaf下建立ecliplsePlungin\jadclips ...

  10. Method of address space layout randomization for windows operating systems

    A system and method for address space layout randomization ("ASLR") for a Windows operatin ...