angular directive-指令

·  阅读 567

指令的类型

  • 结构性指令:通过操作DOM(添加或移除),改变DOM的布局;如*ngIf, *ngFor, *ngSwitch等
  • 属性型指令:改变元素、组件或其他指令的外观和行为;如ngClass, ngStyle, ngModel等
  • 组件:是一种拥有模板的特殊指令。

关于结构型指令

结构型指令能够调整DOM结构,其依赖于一个宿主元素,能够对其宿主元素和子元素执行一些操作,需要注意,每个宿主元素上只能有一种结构型指令。

  1. 结构型指令以*开头,可以将 *理解为一种语法糖,Angular识别到 *会生成一组标签,包含其宿主元素及子元素。

    以*ngIf为例:

    <div *ngIf='true'>*ngIf Directive</div>
    复制代码

    angular会将其解析为:

    <ng-template [ngIf]='true'>
      <div>ngIf Directive in ng-template</div>
    </ng-template>
    复制代码

    对比上述两者渲染出的DOM结构,两者没有任何区别:

  2. 关于<ng-template>标签

    是Angular提供的一个标签,用来渲染HTML,但是它永远不会显示出来,它必须配合结构型指令一起使用,若单独使用,其内部的元素并不会显示,如下,div并不会渲染到DOM中:

    <ng-template>
      <div>该内容并不会显示</div>
    </ng-template>
    复制代码
  3. 关于<ng-container>标签

    也是Angular提供的一组标签,利用该标签,可以将某些元素进行组合,但并不会影响样式及布局;与标签一样,Angular不会将其放进DOM中。以同时*ngFor+ *ngIf为例:

    <div *ngFor="let item of [{name: 'a'}, {name: 'b'}, { name: null}]">
      <span *ngIf='item.name'>{{item.name}}</span>
    </div>
    复制代码

    因为每个组主元素最多只能使用一个结构型指令,上例中使用了两层结构,渲染出来的结构同样为两层,显示如下:

    若使用替代div,只会渲染一层的span标签,如下:

    <ng-container *ngFor="let item of [{name: 'a'}, {name: 'b'}, { name: null}]">
      <span *ngIf='item.name'>{{item.name}}</span>
    </ng-container>
    复制代码

    因此,可以通过合理使用优化DOM结构。

  4. 自定义结构型指令

    除了Angular提供的结构性指令外,也可以自定义结构型指令。同样,使用自定义指令时,angular会在宿主元素外层添加标签,可以使用TemplateRef获取标签中的内容,也可以通过ViewContainerRef访问视图容器,待以后再写一篇详细说明。

关于属性型指令

属性型指令会监听或修改其他元素或组建的行为,属性等,通常会作为属性名应用到元素上,如ngClass为元素添加class,ngStyle为元素添加样式,ngModel为表单元素添加绑定的对象等。

除了Angular提供的属性型指令外,也可以自定义。

在自定义属性型指令时,可以通过elementRef获取宿主元素的引用,通过nativeElement为宿主元素添加样式或class,通过@HostListener添加对宿主元素的事件监听。

分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改