Angular速成3 自定义指令(custom directives)¶

升级angular¶

就在此时angular从12升到了13。我们试一下升级。

更新全局的ng到最新 sudo npm install -g @angular/cli@latest

ng version可以看到版本到了13

https://update.angular.io/ 再按这个官方的指导来升。

进入项目目录 npx @angular/cli@13 update @angular/core@13 @angular/cli@13 这个需要清干净git。

清干净以后再运行又会报 Package ‘@angular/core’ is not a dependency. google查原因。一说是目录里没有node_modules，也就是没编过。但是如果编过了，它又会让清干净git。

再checkout再npx @angular/cli@13 update @angular/core@13 @angular/cli@13 这时又会报一堆dependency error 各种折腾还是不行。

最后按照https://stackoverflow.com/questions/69325053/how-can-resolve-this-situation-error-eresolve-could-not-resolve 报一堆dependency error时运行 npm install –legacy-peer-deps –force

貌似是可以了。总的还是折腾。

angular directive¶

angular指令的类型 1.组件。组件也算一种指令。 2.attribute指令。用来改变元素、组件或其他指令的样式或表现。 3.structural指令。通过增删dom元素来改变dom的布局。

内置的attribute指令¶

常用的内置attribute指令 NgClass 增删css类 NgStyle 增删html的style NgModel 给form设置双向绑定

内置的structural指令¶

NgIf NgFor NgSwitch

https://angular.io/api/core/Directive https://angular.io/guide/built-in-directives https://angular.io/guide/attribute-directives

基本的自定义指令¶

给项目添加一个指令my-editor ng g directive my-editor 生成my-editor.directive.ts

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

@Directive({
  selector: '[appMyEditor]'
})
export class MyEditorDirective {

  constructor() { }

}

引入ElementRef，在组件的构造函数里可以对元素的style直接设置。

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

@Directive({
  selector: '[appMyEditor]'
})
export class MyEditorDirective {

  constructor(el:ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
   }

}

在把html改成

<p appMyEditor>wtf</p>

这样appMyEditor指令就会生效，wtf变成黄色。

引入HostListener，可以监听元素的事件，比如鼠标进入/离开。

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appMyEditor]'
})
export class MyEditorDirective {

  constructor(private el:ElementRef) {
  }

   @HostListener('mouseenter') onMouseEnter() {
      this.highlight('yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
      this.highlight('');
    }

    private highlight(color: string) {
      this.el.nativeElement.style.backgroundColor = color;
    }
}

引入Input。用@Input修饰指令类里的成员gg，并指定’appMyEditor’，gg就和dom的appMyEditor属性绑定了。

@Input('appMyEditor') gg = '';
这样声明后，dom里的appMyEditor属性和gg绑定。
可以这样 <p [appMyEditor]="'red'">wtf</p> 把'red'赋给appMyEditor继而赋给gg。

可以再在组件里定义一个color，在html里用radio点选color。再<p [appMyEditor]=”color”>wtf

这样就实现了可随意点选背景颜色

不再贴出代码。见https://angular.io/guide/attribute-directives

组件的生命周期¶

https://angular.io/guide/lifecycle-hooks

angular组件是有生命周期的。从初始化/渲染组件和子组件开始。生命周期里angular会监听数据绑定，做出更新。当angular销毁组件并把它从dom中移除时，生命周期结束。指令也有相似的生命周期。
可以用lifecycle hook在生命周期的一些关键节点添加逻辑。
ngOnChanges input/output绑定值发生变化 ngOnInit 第一个ngOnChanges发生后 ngDoCheck 自定义变化事件 ngAfterContentInit 组件内容初始化完毕 ngAfterContentChecked 组件的所有检查完成 ngAfterViewInit 组件的view初始化完成 ngAfterViewChecked 组件的view检查完成 ngOnDestroy 临销毁之前
比如OnInit https://angular.io/api/core/OnInit 要用OnInit时就先import一下，然后组件类implements OnInit，就可以在ngOnInit()里加逻辑了。

import { Component, OnInit } from '@angular/core';
...
export class XXXComponent implements OnInit {
...
  ngOnInit(): void {
      xxxxxxxxxx;
  }

每个事件的具体信息请自行研究文档。