Angular内置指令

Stella981
• 阅读 533

Angular2的内置指令可分为通用指令、路由指令、表单指令。

通用指令包含7种,均包含在CommonModule模块中,CommonModule已经包含在了BrowserModule中。

  • NgClass
  • Ngstyle
  • NgIf
  • NgFor
  • NgSwitch、NgSwitchCase、NgSwitchDefault
  • NgTemplateOutlet(不常用)
  • NgPlural、NgPluralCase(不常用)

NgClass(属性型指令) : 绑定一个格式为{ CSS类名:boolean } 的对象,true时添加CSS类到模板元素中,反之移除。

//组件模板中
<div [ngClass]="classes">

//组件类中
classes = { highLight: true };

//组件样式中
.highLight {
  background: yellow;
}

NgStyle(属性型指令) : 绑定一个格式为{ 'CSS样式名' : '样式值' } 的对象

//组件模板中
<div [ngClass]="classes">

//组件类中
classes = { 'color': 'red' };     //可以用表达式

NgIf(结构型指令) : 绑定一个布尔类型的表达式,当表达式返回true时,在DOM树节点上添加一个元素及其子元素,反之移除。

<div *ngIf="方法或表达式">.....<div>

NgFor(结构型指令) : 可以实现重复执行某些步骤来展示数据,同时该指令支持一个可选的index索引,在循环迭代过程中,下标范围是 0<=index<数组长度 。

可以使用可选追踪函数NgForTrackBy,下面例子中追踪函数可以让Angular将具有相同id的对象处理成同一个对象,如果检查处同一个对象的属性发生的变化,Angular就会更新DOM元素,反之保留。

<div *ngFor="let value of values; let i=index; trackBy: trackByValues">{{value}}{{i}}<div>
//注意trackByValues不要加()

//组件类
trackByValues(index: number, value: Value) {
  return value.name;
}

NgSwitch、NgSwitchCase、NgSwitchDefault : 根据NgSwitch绑定的条件值来进行相关匹配,条件匹配元素保留,不匹配元素则移出模板,没有匹配项会保留NgSwitchDefault项。

<div [ngSwitch]="条件">
  <div *ngSwitchCase="case1">...</div>
  <div *ngSwitchCase="case2">...</div>
  <div *ngSwitchDefault>...</div>
</div>

NgTemplateOutlet : 以后再补上...

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
PIC中档单片机汇编指令详解(5)
位操作指令详述BCF数据寄存器指定位清0语法形式:BCFf,b操作数:f为数据寄存器的低7位地址(0x00~0x7F)B为数据位编号(0~7)执行时间:一个指令周期执行过程:使数据寄存器f的的b位清0状态标志影响:无说明:该指令可对任何数据寄存器的任意一个位置清0,常用于标志位的设定和清除,或者把某一管脚置成低电平。指
Stella981 Stella981
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
3年前
AngularJS 指令实践
指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。在这篇文章的最后,我会指导你如何使用Angular指令来创建一个简单的记事本应用。概述一个指令用来引入新的HTML语法。指令是DO
Stella981 Stella981
3年前
Angular @HostBinding()和@HostListener()用法
@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等,而@HostListener()可以监听宿主元素上的事件。@HostBinding()和@HostListener()不仅仅用在自定义指令,只是在自定义指令中用的较多本文基于Angular2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这