介绍
小编给大家分享一下角中如何自定义创建指令,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>指令介绍
在角中有三种类型的指令:
<李> 组件,有模板的指令,组件是继承于指令的,只是扩展类与界面相关的属性。
<李> 属性型指令,改变DOM元素,组件或其他指令的行为和外观的指令,如NgStyle, NgClass。
<李> 结构型指令,通过添加或移除DOM元素改变DOM布局的指令,如NgIf, NgFor。
然而,在实际的开发中,根据业务的需要,我们经常会拓展角组件的指令来方便业务的开发。下面让我们来看看如何创建自己的指令。
<强>创建属性型指令
在角中,属性型指令的创建至少需要一个带有<代码> @Directive 装饰器的控制器类。这个装饰器指定了一个选择器名称,用于标识与指令相关联的属性名称。控制器类实现了指令的功能行为。
接下来,我们创建一个简单的指令,实现鼠标在元素上悬停时,改变起背景颜色;鼠标移开时,背景颜色消失;鼠标点击时,字体变大;鼠标松开时,字体恢复原样的功能。
指令实现
创建background-exed.directive。ts文件,实现如下代码:
import {指令的不同之处是,HostListener, ElementRef,, Renderer2,, HostBinding },得到& # 39;@angular/核心# 39;;
@Directive ({
,,选择器:& # 39;[appBackgroundExe] & # 39;
})
export class BackgroundExeDirective {
@Input才能(& # 39;appBackgroundExe& # 39;)
,,highLightColor:字符串;
构造函数才能(private elementRef:, elementRef,, private 渲染器:,Renderer2), {
,,,//,这种写法比较丑陋
,,,//,this.elementRef.nativeElement.style.background =, & # 39;黄色# 39;;
,,,//,推荐这种写法,渲染器
,,,this.renderer.setStyle (this.elementRef.nativeElement, & # 39;背景# 39;,,& # 39;黄色# 39;);
,,}
@HostBinding才能(& # 39;class.pressed& # 39;)
,,isPressed:布尔;
@HostListener才能(& # 39;mouseenter& # 39;)
onMouseEnter才能():,void {
,,this.highLight (this.highLightColor);
,,}
@HostListener才能(& # 39;mouseleave& # 39;)
onMouseLeave才能():,void {
,,,this.highLight(空);
,,}
@HostListener才能(& # 39;mousedown& # 39;)
onMouseDown才能():,void {
,,,this.isPressed =,真的;
,,}
@HostListener才能(& # 39;mouseup # 39;)
,,onMouseUp (): void {
,,,this.isPressed =,假;
,,}
private 才能突出(颜色:字符串):,void {
,,,//,this.elementRef.nativeElement.style.background =,颜色;
,,,this.renderer.setStyle (this.elementRef.nativeElement, & # 39;背景# 39;,,颜色);
,,}
} 其中,<代码>选择器:& # 39;[appBackgroundExe] & # 39; 是指令关联的属性名称,以便角在编译时,能从模板中找到与此指令关联的HTML代码。
构造函数中,注入了<代码> ElementRef 和<代码> Renderer2 模块的实例。通过<代码> ElementRef 我们可以引用指令标识的DOM元素,并对其进行相关的操作,并且可以利用<代码> Renderer2>
<代码> @HostListener 和<代码> @HostBinding> @HostListener> @HostBinding>
<强>设置字体样式
<李> appliation.component.less
.pressed {
,,字体大小:30 px;
} <>强在模板中使用指令
<李> application.component.html
& lt; div 类=皃anel panel-primary"比;
& lt;才能div [appBackgroundExe]=? # 39;红色# 39;“在鼠标移进,元素变成红色。鼠标移出,元素红色消失& lt;/div>
& lt;/div> <强>创建结构型指令
结构型指令的创建与属性型指令创建大同小异。
<强>指令实现
import {,指令,输入,,TemplateRef,, ViewContainerRef },得到& # 39;@angular/核心# 39;;
@Directive ({
,,,选择器:,& # 39;[appIf] & # 39;
})
export class IfDirective {
,,,构造函数(
,,,,,,,private templateRef:, TemplateRef
