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     <!--自定义指令：ng generate directive 指令名-->
 9     <!--简化写法：ng g d 指令名-->
10     <!--appFocus指令可以让输入框自动获取焦点-->
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 效果图