angular 指令的学习

头像
陈杰
    阅读 5 分钟
    1

    前言

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

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

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

    clipboard.png

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

    一、angular指令概览

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

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

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

    二、属性型指令

    自定义属性型指令

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

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

    clipboard.png

    1. 生成指令类文件，同生成组件一样，使用CLI命令即可

          ng generate directive highlight

      然后就会多了这两个文件：

      clipboard.png

    2. 在指令的逻辑部分：

      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;
  }
}

    3. 使用该指令：

      <button appHighlight="yellow">高亮</button>
    4. 效果：
      clipboard.png

    5. 绑定多个属性：

      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;
  }
}

    6. 使用：

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

      clipboard.png

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

      clipboard.png

    selector：选择器

    如果我写的指令不想被人乱用，比如上述指令我只想在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'
})

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

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

    clipboard.png

    修改后：

    {
    "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>

    clipboard.png

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

       "directive-selector": [
     true,
     "attribute",
     "yunzhi",
     "camelCase"
 ]
      @Directive({
  selector: '[yunzhiUnless]'
})

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

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

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

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

    4. 在模板中使用该指令

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

    5. 测试指令
      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;
}

    效果：
    clipboard.png

    TemplateRef

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

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

    等同于：

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

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

    ViewContainerRef

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

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

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

    clipboard.png

    总结

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

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

    angular
    陈杰
    167 声望332 粉丝

    为API生，为框架死;

    « 上一篇
    抄袭这件事儿
    下一篇 »
    angular 请求本地json数据

    引用和评论

    推荐阅读
    头像
    GGEditor踩坑记录（不推荐）

    陈杰赞 1阅读 3.5k

    头像
    angular 19 学习记录

    吴季分赞 4阅读 801

    头像
    angular 新语法糖学习一

    kexb赞 4阅读 217

    头像
    手把手带你初始化一个angular库

    潘杰赞 4阅读 197

    头像
    实现 Angular 程序处理进度条

    kexb赞 3阅读 366

    头像
    Angular Signal的简单学习

    kexb赞 3阅读 189

    头像
    从angular 15到19 一些新的写法

    zZ_jie赞 3阅读 162

    0 条评论
    得票最新