码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-09-03 00:07:59      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:挂载   学习   line   target   一个   cli   nbsp   nat   browser   

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

 

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

标签:挂载   学习   line   target   一个   cli   nbsp   nat   browser   

原文地址:https://www.cnblogs.com/monkey-K/p/11449528.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!