AngularX

AngularX

小记

小括号在内中括号在外 //小内中外

指令生命周期钩子hooks

ngOnChanges

触发：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。

作用：监听输入数据变化

ngOnlint

触发：第一个ngOnChange触发器之后

作用：初始化指令

ngDoCheck

触发：在Angular上下文发生变化时执行

ngOnDestroy

触发：指令销毁之前

ngAfterContentInit

指令内容初始化完毕

ngAfterContentChecked

Angular检查投影到其视图中的绑定的外部内容之后

ngAfterViewInit

Angular创建组件的视图后

ngAfterViewChecked

Angular检查组件视图的绑定之后

记：8个

技巧

dom操作

获取节点

构造函数注入ElementRef调用querySelector获取节点

使用@ViewChild直接绑定对应的ElementRef节点

官网

与angular1的区别

derive指令

组件指令

拥有模板的指令

结构指令

作用：添加和移除 DOM 元素改变 DOM 布局，对原生html标签进行功能扩展，而不是创建新节点

自定义指令

自带指令

ngFor

ng-content:节点内容占位符

select：值可以为标签、类名、id，是插入内容的选择器

属性指令

[(ng-model)]：双向绑定数据

hidden

值为真时给元素添加display:none（区别于angular1不带!important）

作用：改变元素、组件或其它指令的外观和行为的指令。

对象

ElementRef

通过注解实现已有html节点（或指令内注入构造函数）后可获取对应节点/指令的实现类，进行dom操作和监听

QueryList

一个不可修改的条目列表

Renderer2：所在组件的渲染器，可进行html操作和监听

注解

@ViewChild单节点属性注解：获取单个节点，可配置选择器

@ContentChildren多节点属性注解：获取多个节点，可配置选择器

@ViewChildren属性注解

@Directive指令类注解

@HostListener指令函数注解

监听节点事件

详细文档地址：https://gitee.com/jikold/booturl 或者：https://github.com/dongyanghe/booturl