Angular 核心知识 使用笔记

angular 结构性指令

• 语法糖 【*】
  常用的angular语法糖有： *ngif,*ngfor…

	<mat-icon *ngIf="task.reminder">alarm</mat-icon>
	
	相当于 =>
	
    <ng-template [ngIf]="task.reminder">
        <mat-icon >alarm</mat-icon>
    </ng-template>

angular 模块、元数据

模块可以理解为一组具有相对独立功能的集合。
模块的元数据：declarations，imports，exports，providers，entryComponents等

entryComponents：一进来这个模块就立即加载的，不是你用到才去加载。（比如对话框这种依赖于某种动作去触发的，动态调用的）
exports：需要导出去的，公用的，没有导出去的只能在自己模块中使用

forRoot & forChild

angular 样式

ngClass : 用于条件动态指定样式class，适合对样式做大量更改的情况
ngStyle : 用于条件动态指定样式,适合少量更改的情况
[class.yourcondition]=‘condition’ 直接对应一个条件

可以用 ref- 前缀代替 #。 ref-fax => #fax。

@Input、@Output设置别名

import { component } from '@angular/core'
@component({
	seletor:'exe-app',
	template:'<exe-counter [value]="initialCount"></exe-counter>'
})
export class AppComponent{
	initialCount:number = 5
}

import { component,Input } from '@angular/core'
@component({
	seletor:'exe-counter',
	template:'<p>{{counter}}</p>',
	inputs:['count:value' ]   //类成员属性名称：绑定的输入属性名称
})
export class CounterComponent{
	count:number = 0;
}

ngModule

declarations —— 该应用所拥有的组件。

declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。 一个模块的所有可声明对象都必须放在 declarations 数组中。 可声明对象必须只能属于一个模块，如果同一个类被声明在了多个模块中，编译器就会报错。

这些可声明的类在当前模块中是可见的，但是对其它模块中的组件是不可见的 —— 除非把它们从当前模块导出， 并让对方模块导入本模块。

imports —— 导入 BrowserModule 以获取浏览器特有的服务，比如 DOM 渲染、无害化处理和位置（location）。

providers —— 各种服务提供者。

bootstrap —— 根组件，Angular 创建它并插入 index.html 宿主页面。

提供依赖

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

现在，你就可以在应用中到处注入 UserService 了。

该服务本身是 CLI 创建的一个类，并且加上了 @Injectable() 装饰器。默认情况下，该装饰器是用 providedIn 属性进行配置的，它会为该服务创建一个提供者。在这个例子中，providedIn: ‘root’ 指定 Angular 应该在根注入器中提供该服务。

angular 响应式表单

三个重要元素 ： FormControl,FormGroup,FormBuilder
验证器：同步验证器、异步验证器、动态指定验证器

rxjs

名字由来：Reactive Extension
源自于微软，火于NetFix
优势：在思考的维度上加入了时间考量

const height = document.getElementById('height');
const height$ = Rx.Observable.fromEvent(height,'keyup');
//变量名后面加个$,是一种约定俗成的用法，所有的rx数据流，$表示是一个流

• 常见创建类操作符
  • form : 可以把数组，promise,以及Iterable 转化成 Observable
  • formEvent : 可以把事件转化成 Observable
  • of : 接受一系列的数据，并把它们emit出去
• 常见转换操作符
  • map
  • mapTo
  • pluck
• observable 的性质
  • 三种状态： next, error, complete
  • 特殊的： 永不结束，Never, Empty(结束但不发生)，Throw(直接进入error)
• 常见工具操作符 ：do //临时的subscribe，但是并没有阻断流的进行
• 常见变换类操作符：scan
• 常见数学类操作符：reduce
• 过滤类操作符：filter,take,first/last,skip,debounce,debounceTime，distinct,distinctUntilChanged

//debounce
在一定范围内，只有到达规定的时间节点的才会保留，其他的全部忽略。
//distinct
整个事件流上筛选掉重复出现的流，只保留最先出现的一个。
//distinctUntilChanged
真个事件流上如果与前面一个流重复，则省略

• 创建类操作符 ： Interval,Timer

import { Observable,interval, } from 'rxjs';
import {take} from 'rxjs/operators'
...
const interval$ = interval(100).pipe(take(3))   //创建一个间隔时间为100的定时器，取前3个元素
interval$.subscribe(
  val=>console.log(val),   //next
  error=>console.log('error'),      //error
  ()=>console.log('已经完成了'),    //complete  无参数
)


=====================
0,1,2,已经完成了

• 合并类操作符 ： merge,concat,startWith,combineLatest,withLatesForm.zip
• 高阶操作符：flatMap(mergeMap),switchMap

rxjs 冷和热

冷：不管何时进入，事件流都是从头开始的
热(share())：不管何时进入，事件流都是从当前时间最新的时间点进行

rxjs subject （热 observable）

subject 可以作为数据流接收的一方，有可以作为数据流观察者的一方

ReplaySubject,BehaviorSubject

rudex （store,action,reducer）

状态：影响到ui变化的数据
全局的，唯一的，不可改变（每次返回的是新的状态）的内存状态数据库

- 使用reselect 进行状态函数的高阶运算
reselect:带记忆功能的函数运算
无论多少参数，最后一个才是用于函数运算，其他的都是他的输入