Angular学习笔记
2022-11-01 14:43:44 235 举报AI智能生成
Angular是一款由Google开发的开源Web应用框架，它让开发者能更高效地构建和维护复杂的单页应用。Angular的主要特性包括数据双向绑定、模块化组件、依赖注入等。通过学习Angular，你可以掌握如何使用其核心概念如模块、组件和服务，以及如何利用内置指令和管道进行数据操作和显示。此外，Angular还提供了丰富的工具和库来支持开发过程，如CLI（命令行接口）、测试工具和UI组件库。总之，学习Angular将有助于提高你的Web开发技能，使你能够构建出功能强大且易于维护的应用程序。
作者其他创作
大纲/内容
API
@angular/core
【@】ViewChild 配置视图查询
【C】ChangeDetectorRef 变更检测
detectChanges()： 检查视图及其子视图是否变更, 重新渲染视图
detach()： 分离视图，组件不再变更检测，更新视图
【C】ElementRef 可以渲染的原生元素
nativeElement：原生元素，直接访问宿主DOM
【C】TemplateRef
【C】ViewContainerRef
clear()：清除容器内所有视图
createEmbeddedView()：容器中中插入一个视图
get()：根据索引获取一个视图
@angular/common
【P】CurrencyPipe
【P】DatePipe
【P】DecimalPipe
【P】PercentPipe
【D】NgTemplateOutlet
@angular/forms
【C】Validators
@angular/router
【I】ActivatedRoute
组件与模板
组件交互
输入型绑定传值
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
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
表单验证
内置的验证器
自定义验证器
路由
路由出口
<router-outlet></router-outlet>
路由链接
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
激活的路由
ActivatedRoute
url
data
paramMap
queryParamMap
路由事件
NavigationEnd：导航成功结束之后触发
NavigationCancel：导航被取消之后触发
NavigationStart：导航开始时触发
RouteConfigLoadStart：Router 惰性加载 某个路由配置之前触发
RouteConfigLoadEnd
ActivationStart：在路由器开始激活某个路由时触发
NavigationError：在导航由于意料之外的错误而失败时触发
ResolveStart
ChildActivationStart
GuardsCheckStart
Scroll：滚动事件
动画
0 条评论
下一页
