发表于: 2017-06-20 23:12:59

3 736


今天完成的事情:

看了一下指令,还有官方的Angular部署。


明天计划的事情:

明天再看看rxjs的东西。


遇到的问题:

没有实操,很难遇到什么不能解决的问题。。。


收获:

写一点关于自定义指令的东西吧。


Angular 自定义属性指令

1. 新建一个指令

ng g ng g directive light

打开light.directive.ts新建的指令如下:

import { Directive } from '@angular/core';
@Directive({              // @Directive
 selector: '[myLight]'    // myLight使
})
export class LightDirective {
 constructor() { }
}

导入ElementRef Input:ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。Input将数据从绑定表达式传达到指令中。

import {Directive, ElementRef, Input} from '@angular/core';
@Directive({
 selector: '[myLight]'
})
export class LightDirective {
 constructor(el: ElementRef) {
   el.nativeElement.style.backgroundColor = 'green';
 }
}

我们就新建好了一个简单的属性指令。

2. 使用属性指令

使用属性指令的方式很简单,只需要将指令放到模板的html标签里就可以了:

<h1>My First Attribute Directive</h1>
<p myLight>  ~</p>

当然,还需要将这个指令声明在@NgModule中:

// app.module.ts
...
@NgModule({
 imports: [ BrowserModule ],
 declarations: [
   AppComponent,
   LightDirective    // declarations
 ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

这样便可以在页面中看到效果了。
页面不见鸟~

3. 相应用户触发事件

我们可以在代码中添加相应鼠标事件的代码:

// light.component.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myLight]'
})
export class LightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('mouseenter') onMouseEnter() {
   this.Light('green');
 }
 @HostListener('mouseleave') onMouseLeave() {
   this.Light(null);
 }
 private Light(color: string) {
   this.el.nativeElement.style.backgroundColor = color;
 }

所以上面是看得懂的吧。
@HostListener装饰器引用属性型指令的宿主元素,在这个例子中就是<p>

4. 使用属性绑定向指令中传值

上面的例子我们已经实现的一个简单的指令,但是这样的指令还不够灵活,我们只能指定固定的颜色,而且颜色不能改变,按照预期我们应该是需要能够自己指定颜色才好。这时候就用到了我们刚才导入的Input装饰器。
在组件中新建一个属性用来绑定颜色:假设在AppComponent组件中:

// app.component.ts
export class AppComponent {
 public color = 'green';
}

属性绑定到模板中:

<p [myLight]="color">!</p>

还需要将这个颜色值传入到指令中,指令才能起作用:

// light.directive.ts
@Input() myLight: string;

你可能需要设置一个默认颜色,如果忘记写颜色值,这时候以默认值显示,好吧,直接写完成的指令:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @Input('myLight') highlightColor: string;       //
 @HostListener('mouseenter') onMouseEnter() {
   this.highlight(this.highlightColor || 'red');  //
 }
 @HostListener('mouseleave') onMouseLeave() {
   this.highlight(null);
 }
 private highlight(color: string) {
   this.el.nativeElement.style.backgroundColor = color;
 }
}

5. 绑定第二个属性

一般到这里你再也看不下去了,因为指令已经写好了,心情比较浮躁。但是我还是写了。
实现的方式是相同的,我们这里只是手动指定了一个默认默认颜色,那么这个默认颜色要由用户来指定呢?
好,按照上面的方式再写一个属性defaultColor,然后用到模板中:

<p [myLight]="color" defaultColor="violet">    <!-- -->
 ~
</p>

指令中再修改一下:

// light.directive.ts
@HostListener('mouseenter') onMouseEnter() {
 this.highlight(this.highlightColor || this.defaultColor || 'red');
}

6. 获取宿主元素的属性值

在指令中,通过Attribute装饰器来获取宿主元素的属性值。
指令写法:

import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core';
// ...
// constructor 使 @Attribute宿(p)(hero)
 constructor(el: ElementRef, @Attribute('hero') public hero: string) {
   el.nativeElement.style.backgroundColor = 'green';
   console.log(this.hero);
 }

模板中我们也做适当的修改:

<p myLight hero="Big Keriy!">  <!-- hero -->
 ~
</p>

hero属性的写法有两种方式,当等号右边为变量时使用[hero]这种形式。为固定值的时候,看上面。



返回列表 返回列表
评论

    分享到