Angular7知识点3----指令

版权声明：本文为博主原创文章，未经博主允许不得转载.ttps://blog.csdn.net/qq_34414916/article/details/85164742

本篇博客主要介绍一下Angular模块是什么、有什么用、我们应该如何使用Angular模块，以及其与ts模块的区别等等一些知识点

我们可以使用下面命令创建Angular指令

ng generate directive 指令名
 
 

例如，我要创建一个名叫unless的指令

ng generate directive unless
 
 

Angular就会在src/app目录下面生成两个文件：unless.directive.ts，和unless.directive.spec.ts（指令的测试文件），而且Angular CLI还会将该指令类添加到AppModule的元数据对象的declarations属性中

unless.directive.ts的内容如下

 
 

   
   

    
    

   
   
   
   

    
    

     
     import { Directive } 
     
     from 
     
     '@angular/core';
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     @Directive({
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     selector: 
     
     '[appUnless]'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     class UnlessDirective {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     constructor() { }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

Angular的指令是带有@Directive装饰器的，紧接着该装饰器后面出现的类就是指令的指令类，Angular中有三种类型的指令，你在组件和模板？？这一章应该都已经见过

• 组件——带有模板的指令，因此，组件是一种特殊的指令
• 属性型指令，例如ngModel，用以改变元素、组件或其他指令的行为或者外观
• 结构型指令，例如*ngIf结构型指令的标志就是左上角带*号，可以通过添加或者移除DOM元素来改变DOM布局

后面两种种指令，官方文档足够简单详细，所以我就直接引用了