4 Angular-自定义指令

1 代码结构

 2 myc04.component.html

 1 <p>myc04 works!p>
 2 
 3 
 4 <div>
 5     <input type="text">
 6 div>
 7 <div>
 8     
 9     
10     
11     <input type="text" appFocus value="123">
12 div>
13 <div>
14     <input type="text" value="hello" appUpper>
15 div>

3 focus.directive.ts

 1 import { Directive, ElementRef } from '@angular/core';
 2 
 3 @Directive({
 4   selector: '[appFocus]'
 5 })
 6 export class FocusDirective {
 7 
 8   constructor(e: ElementRef) {
 9     //重启命令行，生成新的指令必须重启服务器才能生效
10     console.log(e)
11 
12     let input = e.nativeElement;//此处，指令绑定在input标签上，所以是input标签    
13     //DOM的原生方法，input的focus方法可以获取焦点
14     input.focus();
15   }
16 
17 }

4 upper.directive.ts

 1 import { Directive, ElementRef } from '@angular/core';
 2 
 3 @Directive({
 4   selector: '[appUpper]'
 5 })
 6 export class UpperDirective {
 7 
 8   constructor(e: ElementRef) {
 9     e.nativeElement.value = e.nativeElement.value.toUpperCase();
10   }
11 
12 }

5 效果图