angular directive 自定义指令--属性方式简单学习

1. 自定义指令 - @directive

import { Component, Directive, HostListener, ElementRef } from '@angular/core'

@Directive({

    selector: '[input-trim]',

    host: {

        '(keyup)': 'keyUpFunc($event.target)',

        '(click)': 'onClick($event.target)',

        'role-data': 'input-trim'

    }

})

export class InputTrimDirective {

    private _elementRef: ElementRef

    constructor(_elementRef: ElementRef) {

        console.log(_elementRef, "获取挂载属性的DOM")

        this._elementRef = _elementRef

    }

    /**

     *  是属性装饰器，用来为宿主元素添加事件监,类似于我们原生JavaScript的addEventListener

        @HostListener这里我们监听了keyup事件(可以定义原生JavaScript中的其他事件),

        当表单中有输入的时候我们就会调用方法，传递了一个$event对象进去，后面紧跟我们触法keyup事件的方法体

        可以用 @Component 中的 host 代替

     * */

    // @HostListener('keyup', ['$event.target'])

    keyUpFunc(evt) {

        if(evt.value) {

            this._elementRef.nativeElement.value = evt.value + '_num'

        }

    }

    onClick(evt) {

        console.log(evt.innerHTML, "click_div")

        if(evt.innerHTML) {

            this._elementRef.nativeElement.innerHTML = evt.innerHTML + '_num'

        }

 

2. DOM 中使用 -- 属性方式使用

<div>

    <h1>指令---directive</h1>

    <input type="text" class="input_1" input-trim>

    <div class="click_div" input-trim>sasas</div>

    <input type="text" class="input_2" role-data='input-trim'>

</div>

3. 在根模块中引用

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { TemplateDirective } from './directive/template-directive.component'

// 指令

import { InputTrimDirective } from './directive/template-directive.component'

@NgModule({

  // 引入组件，指令

  declarations: [

    AppComponent,

    TemplateDirective,

    InputTrimDirective

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }