Angular知识框架学习笔记
2022-10-19 17:21:24 0 举报AI智能生成
Angular知识框架学习笔记
作者其他创作
大纲/内容
API
@angular/core <br>
【@】ViewChild 配置视图查询
【C】ChangeDetectorRef 变更检测
detectChanges()： 检查视图及其子视图是否变更, 重新渲染视图
detach()： 分离视图，组件不再变更检测，更新视图
【C】ElementRef 可以渲染的原生元素<br>
nativeElement：原生元素，直接访问宿主DOM
【C】TemplateRef
@angular/common <br>
【P】CurrencyPipe
【P】DatePipe
【P】DecimalPipe
【P】PercentPipe <br>
【D】NgTemplateOutlet
@angular/forms <br>
【C】Validators
组件与模板
组件交互
输入型绑定传值
分支主题
setter监听输入值变化
通过ngOnChanges()来截听输入属性值的变化
父组件监听子组件事件
管道
自定义管道
内置管道
组件样式
:host 选择宿主元素
:host-context 在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止
/deep/、>>> 和 ::ng-deep（已废弃），任何带有 ::ng-deep 的样式都会变成全局样式
@imports 导入css文件到另一个css文件
生命周期
1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit() 每次创建了组件的子视图后调用
7. ngAfterViewChecked()
8. ngOnDestroy()
指令
结构型指令：修改视图的结构
模板输入变量
模板引入变量
ngFor
ngSwitch
属性型指令：改变一个元素的外观或行为
RxJS
Subject
BehaviorSubject：只接收最新的值
AsyncSubject：程序执行完毕，只接收最后一个值
throttleTime：一定的时间内只执行第一个事件
debounceTime：一定时间之后执行一个事件
map：发送函数处理后的值
ajax
retry：设置失败之后的重试次数
依赖注入
表单
响应式表单
AbstractControl：FormControl、FormGroup 和 FormArray 的基类
setValidators(newValidator: ValidatorFn | ValidatorFn[]): void
clearValidators(): void
enable(opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
get(path: string | (string | number)[]): AbstractControl | null
setParent(parent: FormGroup | FormArray): void
FormArray：表单的数组控件
at(index: number): AbstractControl<br>
push(control: AbstractControl): void
insert(index: number, control: AbstractControl): void
removeAt(index: number): void
setControl(index: number, control: AbstractControl): void
setValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
reset(value: any = [], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
clear(): void
getRawValue(): any
FormControl：跟踪一组 FormControl 实例的值和有效性状态
registerControl(name: string, control: AbstractControl): AbstractControl
addControl(name: string, control: AbstractControl): void
removeControl(name: string): void
setControl(name: string, control: AbstractControl): void
contains(controlName: string): boolean
patchValue(value: { [key: string]: any; }, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
setValue(value: { [key: string]: any; }, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
getRawValue(): any
FormGroup
方法同FormControl
表单验证
内置的验证器
自定义验证器
路由
动画
0 条评论
下一页
