Angular属性型指令

2019独角兽企业重金招聘Python工程师标准>>>

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令

属性性指令的创建步骤如下：

import语句需要从 Angular 的core库导入的一些符号。

1. Directive提供@Directive装饰器功能。

2. ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。

3. Input将数据从绑定表达式传达到指令中，数据绑定。

4. HostListener绑定事件到指令中。

为@Directive装饰器指定一个 CSS 属性选择器[property]，以便从模板中识别出关联到这个指令的 HTML。

import { Directive, ElementRef, Input，HostListener } from '@angular/core';
@Directive({ selector: '[myHighlight]' })

export class HighlightDirective {

    constructor(el: ElementRef) {}

    @HostListener('mouseenter') onMouseEnter() {
       this.el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Angular 会为每个匹配的元素创建一个指令控制器类的实例，并把 Angular 的ElementRef和Renderer注入进构造函数。 ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。Renderer服务允许通过代码设置元素的样式。

 

使用属性型指令

在根模块中import，declarations指令类，然后在需要的模版元素中添加指令名

<p myHighlight>Highlight me!</p>

 

为指令绑定响应事件

从@angular/core中引入@HostListener到指令中。HTML DOM 事件 去掉on前缀

@HostListener('事件') 函数名() {
  //表达式
}

和addEventListener()差不多，此时在绑定了该属性的元素上触发相应的事件后，就会执行@HostListener中的函数。

 

用@Input向指令传递值

可以用一般的各种组件之间的数据传递方法。下面是简单的父组件向子组件传递

• 父组件中设置数据，模版元素绑定用于传递数据的变量名
• 在指令类中  @Input（‘别名’） 变量名: 值类型

 

 

转载于:https://my.oschina.net/u/3412211/blog/895121