发表于: 2017-06-20 23:12:59
3 737
今天完成的事情:
看了一下指令,还有官方的Angular部署。
明天计划的事情:
明天再看看rxjs的东西。
遇到的问题:
没有实操,很难遇到什么不能解决的问题。。。
收获:
写一点关于自定义指令的东西吧。
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.tsimport { 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.tsexport 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]
这种形式。为固定值的时候,看上面。
评论