（不适合没有一点框架基础直接看总结）
（自己因为实习快速过了一遍基础，顺手做的笔记，可能写的不够详细）
插值：{{}}
属性绑定：[xxx]
条件判断：*ngIf
循环语句：*ngFor=“let color of clolors let i=index let odd=odd”
分支语句：[ngSwitch]，*ngSwitchCase，*ngSwitchDefault
事件绑定：(事件) = “函数(可传参)”
模板引用变量（类似于ref）：#模板变量（之后可以在组件模板中的任何地方引用某个模板变量）
如果是想要获取组件实例，从而获取子组件数据，或调用子组件方法
@ViewChild(‘myChild’) child: any; 之后父组件中可用child得到该子组件实例
双向绑定：[(ngModel)]=“变量名”（使用之前需要导入FormsModule板块）
表单控件：
① 注册响应式表单模块，即在app组件导入ReactiveFormsModule，之后子组件就可以直接使用
② 在使用的组件中导入FormControl
③ 生成一个新的FormControl实例
xxx:FormControl = new FormControl(‘’)
④ 在模块中在对应的表单元素上写，例
[formControl]=‘age’
⑤ 通过age.value可获取表单元素的值，通过age.setValue(xxx)修改值
表单控件分组：
① 在使用的组件导入FormGroup
② 生成一个FormGroup实例
loginForm = new FormGroup({
userNmae: new FormControl(‘’),
password: new FormControl(‘’),
});
③ 在form元素上写[formGroup]=‘loginForm’，在表单的其他元素写
formControlName='userName’和formControlName=‘password’
④ 通过loginForm.value可获取数据组成的对象
表单验证：
需通过绑定ngModel的引用来拿到当前组件的信息
#xxx=‘ngModel’
（例，表单元素添加required表示必填，可通过xxx.valid判断验证是否通过）
且使用了三个css类来更新控件，以便反映当前状态
状态 为true时的类 为false时的类
控件已经被访问过 ng-touched ng-untouched
控件值已经变化 ng-dirty ng-pristine
控件值是有效的 ng-valid ng-invalid
自定义表单验证：
① 需要引入FormGroup，FormBuilder，Validators（里面有些内置的验证）
② 在construtor中注入FormBuilder
constructor(private fb:FormBuilder) {}
③ 例，将自定义判断加进去
valiDataForm = this.fb.group({
userName: [‘’, [Validators.required, Validators.maxLength(18)]],
password: [‘’, [this.passWordVal]],
phone: [‘’, [Validators.required, this.phoneVal]]
})
例phoneVal，会接收到phone（FormControl对象），返回一个对象
④ 如果验证不通过，可以通过valiDataForm.get(‘phone’).errors身上找到原因（自定义验证，可以找到当时返回的对象）
管道：{{ 输入数据 | 管道 : 管道参数 }} 可多个管道连用
如果要自定义管道，则ng g p xxx
常用管道：date，json，uppercase，lowercase等等
生命周期（按顺序）：
① ngOnChanges()
② ngOnInit()（只调用一次）
③ ngDoCheck()
④ ngAfterContentInit()（只调用一次）
⑤ ngAfterContentChecked()
⑥ ngAfterViewInit()（只调用一次）
⑦ ngAfterViewChecked()
⑧ ngOnDestroy()
生命周期详解：
投影（类似于vue中的插槽）：
在父组件中：
在子组件中：
若组件模板含有多个ng-content标签：
~ 为了区分投影的内容可以投影到对应ng-content标签，需要使用ng-content标签上的select属性作为识别。
~ select属性支持标签名、属性、CSS 类和 :not 伪类的任意组合。
~ 不添加属性的标签将作为默认插槽。所有为匹配的投影内容都会投影在该ng-content的位置。
在父组件中：
在子组件中：
ContentChild和ViewChild：
ContentChild：与内容子节点有关,操作投影进来的内容，在父组件的ngAfterContentInit生命周期钩子中才能成功获取通过ContentChild查询的元素（用来从通过Content Projection方式 (ng-content) 设置的视图中获取匹配的元素）
ViewChild：与视图子节点有关,操作自身的视图内容，在父组件的ngAfterViewInit生命周期钩子中才能成功获取通过ViewChild查询的元素（用来从模板视图中获取匹配的元素）
（都有对应的复数形式装饰器ContentChildren和ViewChildren）
ng-container标签：
ng-container既不是一个Component，也不是一个Directive，只是单纯的一个特殊tag。ng-container可以直接包裹任何元素，包括文本，但本身不会生成元素标签，也不会影响页面样式和布局。包裹的内容，如果不通过其他指令控制，会直接渲染到页面中，例ngFor和ngIf不能同时处在一个元素上，所以如果要在不添加额外的html标签的情况下达到同样的效果就可以用ng-container
属性传递：
父组件：
子组件：
① 先注入
@Input()
title?:string（之后可修改值）
② 之后模板中可直接使用
{{title}}
组件交互：
① Input
② Output（父组件给子组件传递事件，子组件通过@Output触发）
父组件：传递事件，即 (事件名)=”调用函数”
子组件：
@Output() addList = new EventEmitter()
之后通过this.addList.emit(数据参数)
服务：
把数据获取和保存的职责抽离出来，委托给某个服务，所以服务充当数据访问，逻辑处理的功能，为了让组件专注于数据展示，通过@Injectable()装饰器标识服务（ng g s xxx）
@Injectable({
providedIn: ‘root’
})
providedIn设置作用域，root即表示注入到app.module.ts，或值为null，表示不设定区域，还可以是某个模块的名字（一般就是懒加载模式）
在需要使用的组件中import引入，并注册
constructor(private xxxService:XxxService) {}
之后即可直接this.xxxService调用
由于服务可以注入给多个组件，所以也可以通过这个特性来实现多个组件用一组数据
路由：
路由配置：在app-routing.module.ts中配置路由
const routes: Routes=[
{
Path: ‘xxx’,
Component: xxx
}
]
（当path值为’’，则默认匹配，若path值为’*’，则通配符匹配）
设置路由组件渲染的位置：
跳转路径：(设置路由选中时class的值：routerLinkActive)
路由嵌套：
Children: [{}, {}]
路由传参：
query传参：
xxx
获取query参数：
import {ActivatedRoute} from ‘@angular/router’;
constructor(private routerinfo:ActivatedRoute) {}
this.routerinfo.snapshot.queryParams[‘id’]
params传参：
xxx
获取params参数：
① 在路由配置的时，需有占位符path: ‘hello/:name’
② this.routerinfo.params.subscribe((params:Params) => {
this.name = params[‘name’] // params即传入的所有params参数组成的对象
})