网站首页 » 前端开发 » Angular 2+ » Angular 2+ 属性型指令
上一篇:
下一篇:

Angular 2+ 属性型指令

前言

Angular 中的指令相信你已经已有听闻,或者早就已经在 AngularJS 中用得出神入化了,但到了 Angular 时代一切都已经成为了过去式,一切都得生来,虽然 指令的字义和作用基本没变,但写法已经大不相同了。本文我们就来看看 Angular 2+ 中的属性型指令。

首先我们得知道在 Anguglar 2+ 中什么才算是指令。

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

  • 组件 — 拥有模板的指令,三种指令中最常用的
  • 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,修改视图的结构,如:NgFor 和 NgIf
  • 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,例如,内置的 NgStyle 指令

下面我们来看看如何写一个指令。

属性型指令至少需要一个带有@Directive 装饰器的控制器类,该装饰器指定了一个用于标识属性的选择器, 控制器类实现了指令需要的指令行为。

首先我们先来定义一个超级简单的指令:

attr.directive.ts
import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[bgColor]',
})
export class bgColorDirective {
    constructor(private el: ElementRef) {
        el.nativeElement.style.backgroundColor = '#23282d';
    }
}

ElementRef 注入到指令构造函数中,用于访问 DOM 元素。Angular 2+ 会为每个匹配的元素创建一个指令控制器类的实例,并把 Angular 2+ 的ElementRef 和Renderer 注入进构造函数。 ElementRef 是一个服务,可以通过它的 nativeElement 属性直接访问 DOM 元素。 Renderer 服务允许通过代码设置元素的样式。

指令定义完后,我们需要在 app.module.ts 的 declarations 中像组件一样声明这个指令。

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { bgColorDirective } from './attr.directive';

@NgModule({
  declarations: [
    AppComponent,
    bgColorDirective
  ],
  imports: [
    BrowserModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这些工作都准备好后,我们就可以使用这个指令了。怎么使用呢?

先在组件的 ts 文件中引入这个指令:

app.component.ts
import { Component } from '@angular/core';
import { bgColorDirective } from './attr.directive';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {

}

接着我们就得告诉这个指令我要用到哪里:

app.component.ts
<div bgColor>bgColor me!</div>

上面这个例子可以说是最最简单的,但它足以说明了指令的基本用法。

下面我们再写一个例子让你对指令有一个更加全面的了解,对上面的 attr.directive.ts 进行修改:

attr.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[bgColor]',
})
export class bgColorDirective {
    constructor(private el: ElementRef) { }

    @Input('myBgcolor') backgroundColor: string;

    @HostListener('mouseenter') onMouseEnter() {
        this.setBg(this.backgroundColor || 'red');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.setBg(null);
    }

    private setBg(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

修改示例一中的 app.component.ts

app.component.ts
import { Component } from '@angular/core';
import { bgColorDirective } from './attr.directive';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  color = "blue";
}

修改 app.component.html

app.component.html
<div bgColor [myBgcolor]="color">bgColor me!</div>

其它文件不用变。上面的 directive 可以说是示例一的增加版,只有当鼠标放到了宿主元素上时才会更改背景颜色,并且用户可以自定义背景颜色。通过上面的示例我们可以获取了更多的知识点:

  •  @HostListener 的作用及其基本用法
  • 如何写一个可以可自定义的指令
  • @Input 属性的别名用法

示例中的

输入标题
 <div bgColor [myBgcolor]="color">bgColor me!</div>

除了上面的写法外,还有其它写法,如果我们只需要传一个字符串给 myBgcolor 时,可以写成下面这样:

输入标题
<div bgColor myBgcolor="blue">bgColor me!</div>

也就是说,等号右边如果只是一个字符而不是一个变量的话,此时等号左边的属性就不需要用 [] 包裹。

我们还可以把指令选择器同时作为属性来传递参数。用这种方式就需要修改两个文件:

app.component.ts
<div [bgColor]="color">bgColor me!</div>
attr.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[bgColor]',
})
export class bgColorDirective {
    constructor(private el: ElementRef) { }

    @Input('bgColor') backgroundColor: string;

    @HostListener('mouseenter') onMouseEnter() {
        this.setBg(this.backgroundColor || 'red');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.setBg(null);
    }

    private setBg(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

把 指令中的 @input() 中的参数改成指令选择器的名字。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-attribute-directives/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END