Angular--Directive

2019年9月15日 185次阅读 来源: w芒果

在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>

《Angular--Directive》

《Angular--Directive》

二、结构型指令（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]

结果如图:

《Angular--Directive》

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

    原文作者：w芒果
    原文地址: https://segmentfault.com/a/1190000014704723
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞