Angular2 Directive 学习笔记-基础篇
Angular2 Directive 学习笔记-基础篇在Angular2中有三种类型的指令(Directive) Tips: 关于组件型的指令介绍会在专门的文章里面细致的介绍,毕竟Angular2中组件(Component)是如此的重要。
从创建一个简单属性型指令开始在Angular2中,属性型指令的创建至少需要一个带有@Directive装饰器修饰的控制器类。@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字。 import { Directive,ElementRef,Renderer } from '@angular/core';
@Directive({
selector: '[prefixHightlight]'
})
export class HighlightDirective {
constructor(elem: ElementRef,renderer: Renderer) {
renderer.setElementStyle(el.nativeElement,'backgroundColor','red');
}
}
代码注解:
Tips: 在Angualr的最佳实践中推荐,
1. 我们应该为我们定义的每一个指令,组件,服务都添加上前缀。这样做的好处在于:
确保我们自己声明定义的这些指令,组件,服务不会与标准的HTML属性冲突,也降低与第三方指令,组件,服务冲突的可能性。
2. 指令的名称应该具备一定的自解释性,这样方便我们通过指令的名称就能大概知道指令的用途。
Angular会为每一个被指令匹配上的元素创建一个该指令对应的控制器类的实例。并自动注入该控制器类依赖的别的类的实例。比如上面的代码中,Angualr会选择合适的时机,为我们注入 ElementRef 和 Renderer 的实例。 如何使用属性型指令呢?这个~~~对于Angualr2内置的指令的使用相信大家的已经用的不能在溜溜。我们这里学习一下如何在别的指令,组件中使用我们定义的组件的方法。 <h1>Angualr2 Directive Study</h1>
<article prefixHightlight>hover me</article>
模板定义完成后,我们开始定义我们的组件,将组件的文件名称定义为:app.component.ts,其代码结构如下: import { Component,OnInit } from '@angualr/core';
@Component({
selector: 'prefix-app',templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit(): void {
console.log(`AppComponent has inited : ${ Date.now() }`);
}
}
接着我们声明一个Angular的模块,并在这个Angular模块中显示的声明我们自己定义的指令,以便Angualr在解析模板时,能够正确的识别我们自己定一个指令。 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
imports: [ BrowserModule ],declarations: [
AppComponent,HighlightDirective
],bootstrap: [ AppComponent ]
})
export class AppModule {
}
一定要记住在 @NgModule 的 declarations 数组中显示的声明我们定义的指令。否则,我们运行我们的应用时,浏览器会无情的跟我们抛出下面的错误提示:
简单的来总结一下自定义的属性型指令的运行原理: 实现预定的目标如果你动手实践了上面已经完成的代码,你会惊讶的发现,我们并没有实现我们最初设想的功能,我们仅仅是对使用了prefixHighlight指令的元素简单粗暴的设置了其背景颜色, import { Directive,Renderer,HostListener } from '@angular/core';
@Directive({
selector: '[prefixHightlight]'
})
export class HighlightDirective {
private _domElem: ElementRef;
private _renderer: Renderer;
constructor(elem: ElementRef,renderer: Renderer) {
this._domElem = elem.nativeElement
this._render = renderer;
//renderer.setElementStyle(elem.nativeElement,'backgroundColor','red');
}
@HostListener('mouseenter')
onMouseEnter() {
this._render.setElementStyle(this._domElem,'red');
}
@HostListener('mouseleave')
onMouseLeave() {
this._render.setElementStyle(this.domElem,null);
}
}
代码解释:
如何封装功能强大的指令--让指令可做的事情更多通过上面的修改,我们已经让我们定义的 prefixHighlight 指令具备了我们预期的功能。 我们需要的是灵活可配置的指令现在我们实现的指令中高亮颜色是在指令中硬编码进去的,并没有弹性。 我们期望我们的指令是灵活的,这个颜色能够通过绑定从外部设置。例如: <article [pefixHighlight]="yellow">hover me</article>
还是老规矩,先上代码,之后在解释。接着修改highlight.directive.ts文件,修改后其代码结构如下: import { Directive,HostListener,Input } from '@angular/core';
@Directive({
selector: '[prefixHightlight]'
})
export class HighlightDirective {
private _domElem: ElementRef;
private _renderer: Renderer;
private _defaultColor = 'red';
constructor(elem: ElementRef,'red');
}
@Input('prefixHighlight') highlightColor: string;
@HostListener('mouseenter')
onMouseEnter() {
this._render.setElementStyle(this._domElem,this.highlightColor || this._defaultColor);
}
@HostListener('mouseleave')
onMouseLeave() {
this._render.setElementStyle(this._domElem,null);
}
}
代码解释:
通过上面的修改,我们基本实现了一个属性型指令的定义和使用,也简单粗暴的实现了一些指令输入的功能,由于时间关系(其实是学习程度的问题),这里先不做更深入的介绍,等我打完怪回来继续完善… 彩蛋吗???额外的知识点:上面的代码解释中提到了输入属性,这里就简单的介绍一下什么叫做输入属性吧。这样一来可以让这篇没有结尾的学习笔记看起来并没有哪吗突兀啦! 指令的 输入(Input)属性我们在上面的最后一次修改中添加的 highlightColor 属性是 HighlightDirective 指令的一个 input 属性。
就像在绑定到 HighlightDirective 的 myHighlight 属性时所做的那样。 <p [prefixHighlight]="color">hover me</p>
[prefixHighlight]=”color” 中的 ‘color’ 就是绑定源 。 源属性不需要特别声明。 当前只需要记住,通过@Input装饰的输入声明可以确保指令的消费者只能绑定到公开的 API 中的属性,而不是其它的属性。有效的保护了指令或组件的封装性。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |