Angular built-in指令分为attribute指令和structural指令两种。

Attribute指令

最常用的attribute指令有NgClass, NgStyle和NgModel三种。

NgClass

动态添加或者删除html标签的css类。

例子：

<!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

isSpecial为true时，div标签打上special的css类。

一个更复杂一些的例子：

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>

div的class绑定到了Component的property，名为currentClasses.

在Component的实现代码里，currentclasses的赋值逻辑：

currentClasses: {};
/* . . . */setCurrentClasses() {// CSS classes: added/removed per current state of component propertiesthis.currentClasses =  {saveable: this.canSave,modified: !this.isUnchanged,special:  this.isSpecial};}

NgModel

例子：

<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">

上面实际上是一个双向绑定的语法糖，等价于：

<label for="without">without NgModel:</label>
<input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without">

Structural指令

ngIf

例子：

<div *ngIf="hero" class="name">{{hero.name}}</div>

实际是个语法糖，等价于：

<ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div>
</ng-template>

ngFor

例子：

<app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>

let item of items的含义：Take each item in the items array, store it in the local item looping variable, and make it available to the templated HTML for each iteration.

ngFor指令有一个内置属性index：

<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>

上面的例子，将index属性赋给template变量i.

Angular的built-in指令相关推荐

Angular如何自定义attribute指令
需求: 实现一个自定义的attribute directive,当施加到某个html element时,鼠标hover上去,会修改其背景颜色. Highlight me! 下面是具体做法. (1) 使 ...
Angular应用的路由指令RouterLink
Angular应用的路由指令RouterLinkapp Component html源代码: <h1>{{title}}</h1> <nav><a route ...
Angular深入理解之指令
Angular深入理解之指令指令有什么功能 Attribute directives 属性指令 Structural directives 结构指令自定义属性指令自定义结构指令 Angular深 ...
Angular的内置指令
Angular的内置指令 Angular的三种指令包括渲染指令事件指令节点指令渲染指令 ng-init:初始化.初始化操作,这里用一段代码解释一下吧,代码如下: <div ng-init ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
Hacking with Angular: 玩转ngOptions指令
首先说说为什么要详细的了解一下这个指令,因为在工作中总是遇到关于下拉选项的一些操作,但是又常常会出现一些问题:基本会遇到下面一些问题: 关于下拉框使用ng-repeat或者ng-options指令的区 ...
Angular 一个简单的指令实现阻止事件扩散
//指令定义 @Directive({selector: `click-stop-propagation`events: 'stopClick($event)' }) class ClickStopP ...
Angular里的RouterOutlet指令学习笔记
官网:https://angular.io/api/router/RouterOutlet#description Acts as a placeholder that Angular dynamic ...
angular与angularjs常用指令的不同写法整理
angularjs与angular 常用的指令写法的区别; 一:angularjs指令 1.ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容 <p ng-bind=&quo ...
Angular 自定义结构化指令，如何传入多个输入参数
如下图所示,自定义指令 cxPopover,包含了两个输入参数: 消费的 html 页面: 看起来,cxPopOver 和 cxPopoverOptions 是两个不同的指令,然而其实际上是定义在同一 ...

Angular的built-in指令