rxjs 实用
map
讲一个阵列转成另外一个阵列
of(1).pipe(
map(v => v * 20)
).subscribe(res => {
console.log(res); // 20
});
from([1, 2, 3, 4, 5]).pipe(
map(v => v * 2),
toArray()
).subscribe(res => {
console.log(res); // [2, 4, 6, 8, 10]
});
tap
不会帮助我们进行资料转化,不会影响rxjs资料流,不会都程序有什么影响
of('xxx').pipe(
tap(v=>console.log)
)
shareReplay 避免重新载入
我们会发生
shareReplay(1)只发了一次请求
public todos;
ngOnInit(): void {
this.todos = this.http.get('https://jsonplaceholder.typicode.com/todos/').pipe(
shareReplay(1)
);
}
add() {// 点击的时候执行这个函数
this.todos.subscribe(res => {
console.log(res);
});
}
Subscription(相当于取消订阅)
someSubscriptions = new Subscription();
ngOnInit() {
this.someSubscriptions.add(xx$.subscribe(...));
this.someSubscriptions.add(yy$.subscribe(...));
}
ngOnDestroy() {
this.someSubscriptions.unsubscribe();
}
禁止使用返回键
网上的
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
实现:不能我们使用路由监听,然后调用history.pushState 方法,改变网址就不会跳转
this.router.events.subscribe((event: any) => {
if (event instanceof NavigationEnd) {
history.pushState(null, null, document.URL);
}
});
angular 动画
https://indepth.dev/in-depth-guide-into-animations-in-angular/
style在js中的命名约束
驼峰式,或者破折号
style({ backgroundColor:'green' }) style({ "background-color":"green" })
执行顺序
:enter状态更改将ngOnInit周期之后调用
:leave状态更改讲ngOnDestroy周期调用后,立即执行
设置
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
],
})
动画声明
* 通配符就是默认状态或者所有状态
void dom删除元素
自定义 特定的状态
状态变化之间的转化
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
...
animations: [
trigger('enabledStateChange', [
state(
'default',
style({
opacity: 1,
})
),
state(
'disabled',
style({
opacity: 0.5,
})
),
transition('* => *', animate('300ms ease-out')),
])
]
})
trigger
- 接受动画接触器的名称+转换方法的数组配置
state
- 接受状态名称以及处于指定状态时应有的样式
style
- css样式
transition
- 指定在不同状态一起方向之间转化的配置
- animate 动画的属性
例子
1我是一个好人
2我是一个好人
3我是一个好人
4我是一个好人
5我是一个好人
6我是一个好人
7我是一个好人
8我是一个好人
9我是一个好人
10我是一个好人
ts
public bool:boolean=false;
clickBool():void{
this.bool=!this.bool
}
@Component({
...
animations: [
trigger('fadeSlideInOut',[
transition(':enter', [
style({ opacity: 0, transform: 'translateY(10px)' }),
animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
]),
])
]
})
下面这种模式是从一个状态到另一种状态
trigger('enabledState', [
state(
'default',
style({
opacity: 1,
})
),
state(
'disabled',
style({
opacity: 0.5,
})
),
transition('* => *',animate('300ms ease-out'))
]),
MergeMap
MergeMap 本质上是mergeAll 和 map 的结合
getData(param){ return of(`retrieved new data with param ${param}`).pipe( delay(1000) ) } ngOnInit(): void { from([1, 2, 3, 4]).pipe( map(val=>this.getData(val)), mergeAll() ).subscribe(res=>{ console.log(res); }) } 修改 from([1, 2, 3, 4]).pipe( mergeMap(value => of(`retrieved new data with param ${value}`).pipe(delay(1000))) ).subscribe(res=>{ console.log(res); })
concatMap
from([1, 2, 3, 4]).pipe(
concatMap(value => of(`retrieved new data with param ${value}`).pipe(delay(1000)))
).subscribe(res=>{
console.log(res);
})
两者的区别
concatMap 等待,按顺序执行任务
mergeMap 不等待,并发执行任务
延迟加载
https://stackblitz.com/edit/lazyload-images-matew17?file=src%2Fapp%2Fapp.component.html
确定分配断言
let num!:string;
!这个是告诉语法提示工具，这个已经赋值了，不需要你来判断
点击编辑文本
参考资料
第一种方法
子组件
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Observable} from 'rxjs';
import {State} from '../reducer/scoreboard/scoreboard.reducer';
import {select, Store} from '@ngrx/store';
@Component({
selector: 'app-hello-one',
templateUrl: './hello-one.component.html',
styleUrls: ['./hello-one.component.less']
})
export class HelloOneComponent implements OnInit {
public isEditing: boolean = false;
public pendingValue: string = '';
@Input('value') value!: string;
@Output('valueChange') valueChangeEvents: EventEmitter = new EventEmitter();
constructor() {
}
public cancel(): void {
this.isEditing = false;
}
// 启动对值得编辑.
public edit(): void {
this.pendingValue = this.value;
this.isEditing = true;
}
public processChanges(): void {
// 当值改变的时候才执行
if (this.pendingValue !== this.value) {
this.valueChangeEvents.emit(this.pendingValue);
}
this.isEditing = false;
}
ngOnInit(): void {
}
}
{{ value }}
父组件
export interface Project {
id: string;
name: string;
}
saveProject(project: Project, newName: string) {
project.name=newName
}
public projects: Project[] = [
{ id: "p1", name: "My Groovy Project" },
{ id: "p2", name: "Another Cool Project" },
{ id: "p3", name: "Much Project, Such Wow" },
{ id: "p4", name: "A Good Project" }
];
第二种
巧妙的运行了浅拷贝,仔细思考了半小时才明白
-
{{item.name}}
import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
interface ArrayId {
id: number;
name: string
}
@Component({
selector: 'app-hello-tow',
templateUrl: './hello-tow.component.html',
styleUrls: ['./hello-tow.component.less']
})
export class HelloTowComponent implements OnInit {
public pendingValue: string = '';
public smg: ArrayId | null;
public arr: ArrayId[] = [
{id: 1, name: 'xxxxxx'},
{id: 2, name: 'dddd'},
{id: 3, name: 'ccc'},
{id: 4, name: 'bbb'},
];
processChange() {
if (this.pendingValue !== this.smg!.name) {
// 浅拷贝,终于看懂了,我的天,这块代码巧妙的运用的浅拷贝的方法进行修改
this.smg!.name = this.pendingValue;
}
this.smg = null;
}
constructor() {
}
ngOnInit(): void {
}
edit(item: ArrayId): void {
this.pendingValue = item.name;
this.smg = item;
}
cancel(): void {
this.smg = null;
}
}