angular-指令的学习

jiezi

6 年前

在开发 alice 项目中，使用了阿里的 ng-zorro 框架，所以会经常遇到很多框架自己写的属性，例如下面的栅格：

<div nz-row>
    <div nz-col [nzSpan]="4">
        xxx
    </div>
</div>

其中的 nz-row,nz-col, 以及 nzSpan 就是框架自定义的 html 属性，但他们究竟是什么，又是怎么实现的，我却从来没有想过，所以，趁着本周学习时间比较充裕，就去探索了一下。
首先，在 webstorm 通过 Ctrl + 鼠标点击nz-col 查看它的源码，如图：

发现 nz-col 其实是一个指令，就去 angular 上搜索了指令的内容

在 Angular 中有三种类型的指令：

组件：拥有模板的指令, 例如：<yunzhi-data-list></yunzhi-data-list>
属性型指令：改变元素、组件或其它指令的外观和行为的指令, 上面的 nz-row,nz-col 就是这类指令
结构型指令：通过添加和移除 DOM 元素改变 DOM 布局的指令，例如：*ngFor,*ngIf

这三种指令中最常用的就是组件，所以我重点学习了后两种指令。

目标：使用指令实现给 html 元素绑定背景色：

<button appHighlight = "yellow"> 高亮 </button>

生成指令类文件，同生成组件一样，使用 CLI 命令即可
```
    ng generate directive highlight
```
然后就会多了这两个文件：

在指令的逻辑部分：

export class HighlightDirective implements OnInit {
// 使用 @input 绑定传给指令的值
  @Input('appHighlight') highlightColor: string;
  constructor(private el: ElementRef) {//  ElementRef 就是该指令绑定的宿主元素}

  ngOnInit(): void {
  // 设置该元素的 css 样式的背景色为输入值
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }
}

使用该指令：

<button appHighlight="yellow"> 高亮 </button>

效果：

绑定多个属性：

export class HighlightDirective implements OnInit {@Input('appHighlight') highlightColor: string;
  @Input() defaultColor: string;    // 默认颜色
  constructor(private el: ElementRef) { }

  ngOnInit(): void {
  // 如果 highlightColor 有值，则绑定 highlightColor，没有则绑定 defaultColor
    this.el.nativeElement.style.backgroundColor = this.highlightColor || this.defaultColor;
  }
}

使用：

<button appHighlight="yellow" defaultColor="red"> 高亮 </button>


<button appHighlight defaultColor="red"> 高亮 </button>

如果我写的指令不想被人乱用，比如上述指令我只想在 button 中生效，就要用到指令的选择器（selector
）了。
一般我们命令生成指令文件后会有如下默认的代码段：

@Directive({selector: '[appHighlight]'
})

这个 selector 里的字符串就是我们使用指令绑定到宿主元素的规则，或者说实例化指令对象的规则。

angular 文档提供的规则表如下：

element-name：根据元素名选取。
.class：根据类名选取。
[attribute]：根据属性名选取。
[attribute=value]：根据属性名和属性值选取。
:not(sub_selector)：只有当元素不匹配子选择器 sub_selector 的时候才选取。
selector1, selector2：无论 selector1 还是 selector2 匹配时都选取。

例如，默认的绑定方法就是把该指令当成属性，如：<button appHighlight> 高亮 </button>

如果我想只绑定给 button，就可以这样写：

@Directive({selector: '[appHighlight] button'
})

这样一来，当我绑定到其他元素时，编译器就会报错：

如果我不想使用默认的指令前缀 app，而是换成其他的，如yunzhi，则如图修改tslint.json 文件

修改后：

{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "yunzhi",
            "kebab-case"
        ],
        "component-selector": [
            true,
            "element",
            "app",
            "kebab-case"
        ]
    }
}

指令选择器也修改前缀：

@Directive({selector: '[yunzhi-highlight] button'
})

使用指令：

<button yunzhi-highlight> 高亮 </button>

目标：编写一个 yunzhiUnless 指令，作用与 ngIf 相反，当变量值为 false，显示宿主元素，为 true 则移除不显示。

<p *yunzhiUnless="condition"> 测试 -p</p>

首先为了让指令更符合官方的规范，推荐在 tsLint.json 指令选择器使用格式修改为cameCase, 即默认设置

 "directive-selector": [
     true,
     "attribute",
     "yunzhi",
     "camelCase"
 ]

@Directive({selector: '[yunzhiUnless]'
})

新建指令unless, 注入 TemplateRef，ViewContainerRef（没懂下面这句话，先跟着往下写就行）

使用 TemplateRef 取得 <ng-template> 的内容，并通过 ViewContainerRef 来访问这个视图容器
```
 export class UnlessDirective {
     constructor(private viewContainer: ViewContainerRef,
             private templateRef: TemplateRef<any>) {}}
```

使用 @Inout 将一个布尔值绑定到 yunzhiUnless 属性上，当 condition 为 false, 显示，为 true，不显示

  @Input()
  set yunzhiUnless(condition: boolean) {if (!condition) {this.viewContainer.createEmbeddedView(this.templateRef);
    } else if (condition) {this.viewContainer.clear();
    }
  }

在模板中使用该指令

<p *yunzhiUnless="condition"> 测试 -p</p>

测试指令
html：

<p>
  condition={{condition | json}}
</p>

<label for="show"> 显示 </label>
<input id="show" type="radio" [value]="false" [(ngModel)]="condition">
<label for="unshow"> 不显示 </label>
<input id="unshow" type="radio" [value]="true" [(ngModel)]="condition">

<p *yunzhiUnless="condition"> 测试 -p</p>

ts:

export class TestComponent {condition = false;}

效果：

如名字所示，TemplateRef 用于表示 模板的引用 , 但我们注意到这里并没有使用ng-template，为什么还能引用它呢？
这是因为 *yunzhiUnless 其实是一个语法糖

<p *yunzhiUnless="condition"> 测试 -p</p>

等同于：

<ng-template [yunzhiUnless]="condition">
  <p> 测试 -ng-template</p>
</ng-template>

如果没有使用结构型指令，而仅仅把一些别的元素包装进 <ng-template> 中，那些元素就是不可见的。

ViewContainerRef 用于表示容器的引用，通常是 span,div 等

ViewContainerRef 对象提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。

简单理解就是如下图，templateRef指向 ng-template 标签，viewContainer指向 ng-container 标签

简单的了解了 angular 指令的实现后，发现在使用时减少了很多迷茫，有些以前不懂的细节也知道了为什么会这样，不过也发现自己还有好多不懂的地方，比如模板和容器，DOM 的一些操作等。

参考文章：
Angular 2.x 结构指令
angular 官方文档：属性型指令
angular 官方文档：结构型指令

angular-指令的学习

前言

一、angular 指令概览

二、属性型指令

自定义属性型指令

selector：选择器

三、结构型指令

自定义结构型指令

TemplateRef

ViewContainerRef

总结