Angular学习笔记
2022-11-01 14:43:44 217 举报AI智能生成
登录查看完整内容
Angular是一款由Google开发的开源Web应用框架，它让开发者能更高效地构建和维护复杂的单页应用。Angular的主要特性包括数据双向绑定、模块化组件、依赖注入等。通过学习Angular，你可以掌握如何使用其核心概念如模块、组件和服务，以及如何利用内置指令和管道进行数据操作和显示。此外，Angular还提供了丰富的工具和库来支持开发过程，如CLI（命令行接口）、测试工具和UI组件库。总之，学习Angular将有助于提高你的Web开发技能，使你能够构建出功能强大且易于维护的应用程序。
作者其他创作
大纲/内容
【@】ViewChild 配置视图查询
detach()： 分离视图，组件不再变更检测，更新视图
【C】ChangeDetectorRef 变更检测
nativeElement：原生元素，直接访问宿主DOM
【C】ElementRef 可以渲染的原生元素
【C】TemplateRef
clear()：清除容器内所有视图
createEmbeddedView()：容器中中插入一个视图
get()：根据索引获取一个视图
【C】ViewContainerRef
@angular/core
【P】CurrencyPipe
【P】DatePipe
【P】DecimalPipe
【P】PercentPipe
【D】NgTemplateOutlet
@angular/common
【C】Validators
@angular/forms
【I】ActivatedRoute
@angular/router
API
输入型绑定传值
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
结构型指令：修改视图的结构
属性型指令：改变一个元素的外观或行为
指令
组件与模板
Subject
BehaviorSubject：只接收最新的值
AsyncSubject：程序执行完毕，只接收最后一个值
throttleTime：一定的时间内只执行第一个事件
debounceTime：一定时间之后执行一个事件
map：发送函数处理后的值
ajax
retry：设置失败之后的重试次数
RxJS
依赖注入
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
AbstractControl：FormControl、FormGroup 和 FormArray 的基类
at(index: number): AbstractControl
push(control: AbstractControl): void
removeAt(index: number): void
clear(): void
getRawValue(): any
FormArray：表单的数组控件
removeControl(name: string): void
contains(controlName: string): boolean
FormControl：跟踪一组 FormControl 实例的值和有效性状态
方法同FormControl
FormGroup
响应式表单
内置的验证器
自定义验证器
表单验证
表单
<router-outlet></router-outlet>
路由出口
<a routerLink=\"/crisis-center\" routerLinkActive=\"active\">Crisis Center</a>
路由链接
url
data
paramMap
queryParamMap
ActivatedRoute
激活的路由
NavigationEnd：导航成功结束之后触发
NavigationCancel：导航被取消之后触发
NavigationStart：导航开始时触发
RouteConfigLoadStart：Router 惰性加载 某个路由配置之前触发
RouteConfigLoadEnd
ActivationStart：在路由器开始激活某个路由时触发
NavigationError：在导航由于意料之外的错误而失败时触发
ResolveStart
ChildActivationStart
GuardsCheckStart
Scroll：滚动事件
路由事件
路由
动画
Angular
0 条评论
回复 删除
下一页
