angular 学习记录（六）

一、自定义指令：

属性型指令至少需要一个带有@Directive装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。控制器类实现了指令需要的指令行为。
创建一个简单属性型指令myHightLight,当用户把鼠标悬停在一个元素上时，改变他的背景色。你可以这样用它：

1.在app.component.html同级目录下，新增app-highlight.directive.components.ts组件

import { Directive,ElementRef } from '@angular/core';
// 选择器
@Directive({
    selector: '#appHighlight',//.class #id  tag [属性选择器]
})
export class AppHighlightDirective {
    // 注入ElementRef对象,可以获取指定绑定的Dom元素，通过nativeElement来操作dom 
    constructor(private el: ElementRef){
        // nativeElement 就是dom节点
        el.nativeElement.style.background ='yellow';
    }
}

image.png

2.使用

1.id

image.png

2.属性

image.png

3.扩展：

a.通过属性传值，改变背景色

image.png

b.鼠标移入，背景色改变

import { Directive, ElementRef, Input, OnInit, HostListener } from '@angular/core';
// 选择器
@Directive({
    selector: '[appHighlight]',//.class #id  tag [属性选择器]
})
export class AppHighlightDirective {
    @Input() appHighlight: any;
    // 注入ElementRef对象,可以获取指定绑定的Dom元素，通过nativeElement来操作dom 
    constructor(private el: ElementRef) {
    }
    // 组件初始化的时候自动调用
    // ngOnInit() {
    //     // nativeElement 就是dom节点

    //     console.log(this.appHighlight);

    //     if (this.appHighlight == '') {
    //         this.el.nativeElement.style.background = 'yellow';
    //     } else {
    //         this.el.nativeElement.style.background = this.appHighlight;
    //     }
    // }
    // 事件控制颜色显示
    // @HostListener 事件监听
    // onMouseover() 事件调用方法
    @HostListener('mouseover') onMouseover() {
        console.log(1);
        if (this.appHighlight === '') {
            this.el.nativeElement.style.background = 'yellow';
        } else {
            this.el.nativeElement.style.background = this.appHighlight;
        }
    }
    @HostListener('mouseout') onMouseout() {
        this.el.nativeElement.style.background = null;
    }
}

image.png