Angular--Directive

前端之家收集整理的这篇文章主要介绍了Angular--Directive前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在Angular2中有三种类型的指令(Directive) ,如下:
1. 属性型指令 - 改变元素显示和行为的指令。例如:NgStyle …
2. 结构型指令 - 通过添加和移除DOM元素来改变DOM结构的指令。例如:NgFor,NgIf …
3. 组件 — 拥有模板的指令。

一、属性指令(ngStyle ,ngClass)

NgStyle
绑定一个有形如CSS属性名:value的对象,其中value为具体的css样式,eg:

<div [ngStyle]="{color: 'white','background-color':'green'}"></<div>

注意,在 ngStyle 的说明中,我们对 background-color 使用了单引号,但却没有对 color 使用。这是为什么呢?因为 ngStyle 的参数是一个JavaScript对象,而color 是一个合法的键,不需要引号。但是在 background-color 中,连字符是不允许出现在对象的键名当中的,除非它是一个字符串,因此使用了引号。通常情况下,尽量不会对对象的键使用引号,除非不得不用。

//动态使用

<span [ngStyle]="{color: color}">{{ color }} text</span>

//判断添加

<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

NgClass
利用NgClass指令,可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象,其中value的值是一个布尔型的值,当value值为true时,添加对应类型的模板元素,反之则移除。

//基本用法

<div [ngClass]="{bordered: false}">此时div不包含bordered 类名</div>
 <div [ngClass]="{bordered: true}">此时div含有bordered 类名</div>

//判断

<i [ngClass]="{green: isAddr,red: !isAddr}"></i>

二、结构型指令(ngIf ,ngFor ,ngSwitch)

NgIf
指定绑定一个布尔型的表达式,当表达式返回true时,可以在DOM树节点上添加一个元素及其子元素,反之被移除。

如果表达式的结果返回的是一个假值,那么元素会从DOM上被移除。
下面是一些例子:

<div *ngIf="false"></div> //不显示
<div *ngIf="a > b"></div>//
<div *ngIf="str == 'yes'"></div> 
<div *ngIf="myFunc()"></div>

NgFor
NgFor指令可以实现重复执行某些操作来展示数据。NgFor指令支持一个可选的index索引。
它的语法是 *ngFor="let item of items" :
let item 语法指定一个用来接收 items 数组中每个元素的(模板)变量。
items 是来自组件控制器的一组项的集合

this.cities = ['厦门','福州','漳州'];
<div class="ui list" *ngFor="let c of cities">{{ c }}</div>

获取索引
在迭代数组时,我们可能也要获取每一项的索引。
我们可以在 ngFor 指令的值中插入语法 let idx = index 并用分号分隔开,这样就可以获取索引了。

<div class="ui list" *ngFor="let c of cities; let num = index">{{ num+1 }} . {{ c }}</div>

结果如下:
1.厦门
2.福州
3.漳州

ngSwitch
有时候你需要根据一个给定的条件来渲染不同的元素。
遇到这种情况时,你可能会像下面这样多次使用 ngIf :

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">Var is something else</div>
</div>

对于这种情况,Angular引入了 ngSwitch 指令。

NgSwitch:绑定到一个返回控制条件的值表达式
NgSwitchCase:绑定到一个返回匹配条件的值表达式
NgSwitchDefault:用于标记默认元素的属性,是可选的。如果我们不用它,那么当 myVar 没有匹配到任何期望的值
时就不会渲染任何东西。
使用ngSwitch 指令来重写上面的例子:

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchCase="'A'">Var is A</div>
    <div *ngSwitchCase="'B'">Var is B</div>
    <div *ngSwitchCase="'C'">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>
三、组件

属性型指令的创建至少需要一个带有@Directive装饰器修饰的控制器类。@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字。

接下来,开始创建一个简单的属性型指令,该指令的功能是,user-quotation-view.component.html页面刷新时获取.quotation-area的最小高度。

1、首先我们确认好指令名字,quotationArea

<div class="quotation-area" quotationArea></div>

把这个指令作为一个属性应用到一个DOM元素上,也就是我们需要为我们定一个这个指令找到一个宿主元素。
2、之后我们创建一个quotationArea.directive.tss文件,其代码结构如下:

import {Component,Directive,ElementRef,OnInit} from '@angular/core';
@Directive({ selector: '[quotationArea]'})
export class QuotationAreaDirective implements OnInit {

  el:ElementRef;
  constructor(el: ElementRef) {
    this.el = el;
  }
  ngOnInit() {
    const $el = $(this.el.nativeElement);
    const windowHeight = document.documentElement.clientHeight; //获取窗口高度
    const bar=document.getElementsByClassName('bar-nav')[0]
    const barHeight =bar.clientHeight;
    const heightValue=windowHeight - barHeight;
    $el.css('height',(heightValue) + 'px');

  }
}

3、接下来 我们需要在module.ts中来显示的声明我们自己定义的指令,以便Angualr在解析模板时,能够正确的识别我们自己定一个指令。

import {QuotationAreaDirective} from './user-quotation/user-quotation-view/quotationArea.directive';
    declarations: [QuotationAreaDirective]

结果如图:

参考文章https://blog.csdn.net/shenlei...

原文链接:https://www.f2er.com/angularjs/144664.html

猜你在找的Angularjs相关文章