angular6 开发实践基础知识汇总

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;

                      }

                }