angular自定义指令使用技巧

1.指令分类与概念

1. 组件 — 组件的特殊存在,拥有模板

2. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,常用的有:*ngIf,*ngFor,ngSwitch

3. 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,常用的有:NgClass,NgStyle

2.自定义指令

 directive的目的用于动态元素的创建，可以实现特定的行为，接收当前元素的实例。

2.1动态模板，基于后台数据动态创建行，每个行元素添加appDivDragable指令，实现基于当前元素的拖拽功能

　　<ng-template farrisTemplate="body" let-rowNode let-treeNode="node" let-rowData="rowData">

                <tr #row="row" [selectRow]="rowNode" [dblclick]="true" class="farris-table-selectedrow"

                  *ngIf="rowData.level<=3">

                  <td style="border: 0" [style.color]="row.selectRowDisabled ? '#a6a6a6' : '#333'">

                    <farris-treeTableToggler [rowNode]="rowNode"></farris-treeTableToggler>

                    <span>{{ rowData.name }}</span>

                  </td>

                </tr>

                <tr #row="row" [selectRow]="rowNode" [dblclick]="true" class="farris-table-selectedrow" appDivDragable

                  [utils]="utils" [graph]="graph" [rowData]="rowData" [funct]="funct" *ngIf="rowData.level>3">

                  <td style="border: 0" [style.color]="row.selectRowDisabled ? '#a6a6a6' : '#333'">

                    <farris-treeTableToggler [rowNode]="rowNode"></farris-treeTableToggler>

                    <span>{{ rowData.name }}</span>

                  </td>

                </tr>

              </ng-template>

2.2 指令代码

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({

  selector: '[appDivDragable]'

})

export class DivDragableDirective {

  @Input('param') utils: any; // 参数

  @Input('param') graph: any;// 参数

  private _nativeElement: Element;

  constructor(private el: ElementRef) {

    this._nativeElement = el.nativeElement; // 获取当前行元素

   }