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 { }

 

posted @ 2019-09-02 22:42  monkey-K  阅读(3778)  评论(0编辑  收藏  举报