angular4笔记系列之内置指令小结

内置指令

内置属性型指令

属性型指令会监听和修改其它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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular4 中内置指令的基本用法

    前言 大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法. ngFor 作用:像 for 循环一样,可以重复的从数组中取值并显示出来. 例子: // .ts this.userInfo = ['张三', '李四', '王五']; // .html <div class

  • angular4笔记系列之内置指令小结

    内置指令 内置属性型指令 属性型指令会监听和修改其它HTML元素或组件的行为.元素属性(Attribute).DOM属性(Property). NgClass 形式:[ngClass]="statement" 通过绑定到NgClass,可以同时添加或移除多个类. setCurrentClasses() { this.currentClasses = { 'saveable': this.canSave, 'modified': !this.isUnchanged, 'special':

  • Vue 通过自定义指令回顾v-内置指令(小结)

    Vue 通过自定义指令回顾v-内置指令(小结)

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上,尽量不去操作增删改 DOM.通过了解如何去自定义指令,可以想象内置指令是如何完成的. 内置指令 指令名称 描述 使用 v-model 绑定数据 <\input v-model="message"> v-text 输出文本,不能解析标签 <

  • Python入门及进阶笔记 Python 内置函数小结

    内置函数 常用函数 1.数学相关 •abs(x) abs()返回一个数字的绝对值.如果给出复数,返回值就是该复数的模. 复制代码 代码如下: >>>print abs(-100) 100 >>>print abs(1+2j) 2.2360679775 •divmod(x,y) divmod(x,y)函数完成除法运算,返回商和余数. 复制代码 代码如下: >>> divmod(10,3) (3, 1) >>> divmod(9,3) (

  • Python基础教程之内置函数locals()和globals()用法分析

    本文实例讲述了Python基础教程之内置函数locals()和globals()用法.分享给大家供大家参考,具体如下: 1. 这两个函数主要提供,基于字典的访问局部变量和全局变量的方式. python 使用叫做名字空间的东西来记录变量的轨迹.名字空间是一个字典 ,它的键就是字符串形式的变量名字,它的值就是变量的实际值. 名字空间可以像 Python 的 dictionary 一样进行访问. 在一个 Python 程序中的任何一个地方,都存在几个可用的名字空间. 每个函数都有着自已的名字空间,叫做

  • AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

  • Angular2内置指令NgFor和NgIf详解

    Angular2内置指令NgFor和NgIf详解

    在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分

  • ubuntu下linux常用指令小结

    来实验室将近一个月,几乎没碰window,一直在ubuntu下开发,然后想总结一下最近常用的linux指令. (0) su和sudo:得到root权限 su 切换到root用户 sudo command 切换到root用户,执行command,然后切换回当前用户 su liaohuqiang 切换回普通用户 (1) apt:用于安装软件包 apt list 根据名称列出软件包 apt show 显示软件包细节 sudo apt install 安装软件包 sudo apt remove 卸载软件

  • 详谈Python基础之内置函数和递归

    详谈Python基础之内置函数和递归

    一.内置函数 下面简单介绍几个: 1.abs() 求绝对值 2.all() 如果 iterable 的所有元素都为真(或者如果可迭代为空),则返回 True 3.any() 如果 iterable 的任何元素为真,则返回 True.如果iterable为空,则返回 False 4.callable() 如果 object 参数出现可调,则返回 True,否则返回 False 5.divmod() 以两个(非复数)数字作为参数,并在使用整数除法时返回由商和余数组成的一对数字.对于混合操作数类型,二

  • vue内置指令详解

    指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url" rel="external nofollow" rel="external n

随机推荐