1 事件处理

   1.1   鼠标移入事件触发

         (mouseenter)=" "

              eg:   (mouseenter)="isCollapsed=false"        通过给isCollapsed赋值来实现隐藏显示

   1.2   鼠标移出事件触发

         (mouseleave)=" "
 
               eg:  (mouseleave)="isCollapsed=true"          通过给isCollapsed赋值来实现隐藏显示
       
   1.3  点击事件触发
 
          (click)=" "
 
              eg： (click)="toggleCollapsed()"                     点击事件，执行一个函数
 
2  结构型指令
 
    2.1  angular 内置指令 
 
           2.1.1  元素显示隐藏指令 （布尔值，为true时显示，为false时隐藏）
      
                *ngIf=" "
 
                     eg:  *ngIf="leveldisplay"             leveldisplay=true 时显示  
  
            2.1.2  元素迭代指令  
    
                *ngFor=""
 
                      eg: *ngFor="let hero of heroes"      heroes 是要迭代的数据 ， hero 为迭代的属性，可以在它身上取到属性值  如 hero.id
 
      2.2 angular  自定义指令
 
          2.2.1  创建自定义组件
 
                 引入创建指令需要依赖的组件库
                 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
                 Directive       指令装饰器
                TemplateRef      生成的 <ng-template> 元素中创建一个内嵌的视图，并把这个视图插入到一个视图容器中，可以使用TemplateRef取得 <ng-template> 的内容
                ViewContainerRef     通过ViewContainerRef来访问这个视图容器。
 
                 在指令装饰器中，选择在html中创建的指令属性名字， 这个方括号定义出了一个 CSS 属性选择器。
                 @Directive({ selector: '[appUnless]'})
 
                 都注入到指令的构造函数中，作为该类的私有属性。
  　　　　constructor(  private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
               
                 自定义指令的执行代码
 
                 声明一个控制属性
                  private hasView = false;
 
                  设置自定义的属性appUnless 的值的类型为布尔值
                 @Input()   set appUnless(condition: boolean) {
                      判断  布尔值不为真，且 声明的变量值不为真
                      if (!condition && !this.hasView) {
                             在视图中创建一个 内嵌的视图，并把这个视图插入到一个视图容器中
                             this.viewContainer.createEmbeddedView(this.templateRef);
                             让隐藏的视图显示出来
                             this.hasView = true;
                      } else if (condition && this.hasView) {
                            把视图容器中创建的内嵌视图删除
                            this.viewContainer.clear();
                           让显示的视图隐藏起来
                            this.hasView = false;
                      }
                }