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

Posted 2022-09-25 monkey-k

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