概述
常用操作指令
安装 Angular CLI
npm install -g @angular/cli
新建项目
ng new my-app
运行项目
ng serve
生成组件(–跳过测试)
ng g c name --skipTests
生成路由快捷
ng g m name --routing
生成路由守卫
ng g g name
生成服务
ng g s name --skipTests
ng n 项目名 -p 前缀名 --routing -g -S（跳过测试） --style scss
生成带路由的模块
ng g m pages/albums --routing
生成onpush策略的组件
ng g c pages/albums -c OnPush
目录介绍
angular.json
插件的配置
.browserslistrc
浏览器配置
karma.conf
单元测试
声明组件
组件的声明在app目录下，该目录包含三个文件
app.component.html（配置template）
相当于vue的template
app.component.scss (配置样式)
app.component.ts（合成组件）
配置组件，包括组件名和template
app.module.ts（加载组件）
相当于app.vue，在这里声明主组件
跳过组件自身实例化
Skipself不在自身这里找
Optional表示可以没有爹，不然的话会一直往上找，找不到就会报错
使用子组件
声明组件
使用组件
组件指令化
子组件获取父组件
父组件提供抽象类的方式
父组件使用forwardRef打破循环引用
子组件
父组件穿透子组件样式
指令
可以在指令中操作dom
监听dom事件
入口文件main.ts
挂载组件
装饰器
属性装饰器
函数装饰器
类装饰器
安装插件
jquery和bootstrap
npm i jquery@1.9.1 --save
npm install bootstrap --save
Angular.json中
类的绑定
单一类
多重类绑定
父子组件传值
父传子
子组件函数中其中的input中输入的是别名
Html中
组件上
使用父组件的函数
子传父
子组件中
父组件中
原理
子传父主要是子组件触发自己组件上的方法，然后该方法再去触发父组件上的方法
双向绑定
表单中必须有name属性
App.module.js中引入
该绑定相当于
也相当于
判断循环使用
Ngif的使用
完整写法
一般写法
声明变量
Ngswitch的用法
Ngfor
使用trackBy来使得根据id判断是否需要替换元素
模板引用变量
可以直接根据id获取模板，ref-可以代替#
还可以直接获取组件内的函数
可以用在普通元素、ngtemplate、组件
安全导航运算符（可选链）
一开始没有值，后来才有，加问号使其不报错
Ngtemplate
Ngtemplate不会显示出来，用来渲染html，渲染前会把该内容替换成一个注释。
除非使用ngif才能使里面的内容显示，不会影响dom结构
Ngcontainer
不会破坏html结构，不会显示出来
结构性指令
使用set方法给指令传值
TemplateRef和ViewContainerRef
TemplateRef是html实例，ViewContainerRef是实例化一个视图，并将该视图插入到父容器中，如果是父容器直接调用则不会插入
如果是非父容器直接调用
要加*号
上下文
变量默认为$implicit的值，自定义值
监听输入属性变化
使用set
使用ngOnChange
指令
HostBinding
给dom绑定属性
@input
@input(‘xxx’) xxx代表别名
viewChild
Static
True–表示变更检测前拿到变量
Ngtemplate上使用
获取里面元素的方法
普通dom上使用(ElementRef)
viewChild中第一个参数传入的是selector，变更检测后才能拿到，
第二个参数是{static:false}默认是false，表示是否是静态元素（上面没有if），如果是那么在nginit时候可以拿到，否则只能在init后面周期
组件上使用
第一个参数可以传入component或者id
利用container装template
ViewChild（选择器）
只有在变更检测后才会获取元素，可以通过static属性选择是否尽早拿到元素，前提是静态元素（未使用ngif）
https://angular.cn/api/core/ViewChild
在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询
三种类型
ViewContainerRef类型
Insert方法
Createembeddedview（把视图放到父容器里面），https://angular.cn/api/core/ViewContainerRef#createembeddedview
实例化一个内嵌视图，并把它插入到该容器中。
contentChild
获取插槽传进来的值
插槽
利用ngTemplateOutlet
还可以
传值给插槽
关于dom相关的对象
ContentChildren（与指令结合使用）
获取子指令对象只会查找一级子元素，不会查找孙元素
ElementRef
获取本身的dom
Renderer2
获取操作dom的方法类
@Inject(DOCUMENT)
获取document
Ng-content（插槽）
获取插槽内的元素
使用ContentChildren获取数组
管道（过滤器）
非纯管道是指未改变内存地址angular检测不到更改，可以手动更改pure:false使其为纯管道（深度检测）
变更检测
触发检测
- 事件：页面click、submit、mouse down…
- Xhr：从后端服务器拿到数据
- Timers：setTimeout()、setInterval()
变更检测触发时会检测每一个组件 - Subscribe，比如combineLatest
单向数据流机制
一轮检测中从父组件流向子组件，也就是说父组件可以改变子组件的值，但是子组件改变父组件的值就会报错。如果从新触发新一轮的检测，则不会报错，也就是上面所提到的方法。
onPush策略下触发变更检测的时机（条件检测）
组件的@input引用发生变化
click、submit、mouse down、Observable订阅事件，同时设置Async pipe
手动弄使用ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()方法阻断了一个组件的变更检测后，他和他的子组件都不会检测了
剥离组件
子组件
点击时传入的值发生变化onchange可以检测到
恢复组件
设置只有@input触发变更检测
markForCheck（下一轮变更检测）
在该情况下又想用setTimeout更新，那么可以用
detectChanges强行变更检测
不会改变的情况
会改变的情况
获取组件的方式
elementRef
直接用class
组件外
组件内本级元素
祖先元素(不一定是父级)
:host-context{}
组件内样式
不进不出
ShadowDom不能影响外面，外面也无法影响里面
该样式没有生效
只进不出
Emualted全局样式能进来，不会影响外面
能进能出
None里面可以影响外面，外面会影响里面
动态组件
自定义组件
普通组件
接收值
快捷绑定前提是output的开头必须是size
向外发射值
调用外部函数
使用ngModel
初始化
其中useExisting为属性指定别名和类提供程序，意思就是说provide为该组件的别名
当一个类需要引用自身的时候，使用 forwardRef 来打破这种循环
传入值触发writeValue
往外传调用onChange
外部接收值的函数
Disabled属性
当传入disabled时会触发setDisabledState函数
属性选择器
获取元素
用法
ngModel传入的值会触发writeValue函数
其中host表示给最外层加属性
给host绑定属性以及点击事件
属性选择器的输入属性
服务里面用render2
最后
以上就是粗暴书包为你收集整理的angular十天急速入门开发必备，迅速上手企业级项目（一）（基础知识速查）常用操作指令目录介绍声明组件使用子组件指令入口文件main.ts装饰器安装插件类的绑定父子组件传值双向绑定判断循环使用模板引用变量安全导航运算符（可选链）NgtemplateNgcontainer结构性指令TemplateRef和ViewContainerRef监听输入属性变化指令ViewChild（选择器）contentChild插槽关于dom相关的对象Ng-content（插槽）管道（过滤器）变更检测获取组件的方式组的全部内容，希望文章能够帮你解决angular十天急速入门开发必备，迅速上手企业级项目（一）（基础知识速查）常用操作指令目录介绍声明组件使用子组件指令入口文件main.ts装饰器安装插件类的绑定父子组件传值双向绑定判断循环使用模板引用变量安全导航运算符（可选链）NgtemplateNgcontainer结构性指令TemplateRef和ViewContainerRef监听输入属性变化指令ViewChild（选择器）contentChild插槽关于dom相关的对象Ng-content（插槽）管道（过滤器）变更检测获取组件的方式组所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复