angular的學習進階 十七

2022-02-19 07:29:06 字數 4504 閱讀 7505

資料

export type shape = '1' | '2';

export type card = '3' | '4';

public shapes$ = new subject();

public cards$ = new subject();

zip(of(1),of(2)).subscribe(console.log)

ngoninit(): void

["1", "3"]

["2", "3"]

["1", "4"]

forkjoin(of(1),of(2)).subscribe(console.log)

[1,2]

ngoninit(): void

["1", "4"]

ngoninit(): void 

//  ["1", "3"]

// ["2", "3"]

// ["2", "3"]

// ["1", "3"]

// ["1", "4"]

[1, 2, 3, 1, 3]   of(1, 1, 2, 2, 3, 3, 1, 3, 3, 3).pipe(distinctuntilchanged(), toarray()).subscribe(console.log);

// [1, 2, 3, 1, 3]

of('a', 'a', 'b', 'c', 'd', 'd', 'e', 'f', 'g', 'g', 'h').pipe(

// 把前一個字和後一個值轉化成小寫,所以相同的就可以跳過

// c ,p 可以理解成前一個值,後一個值

distinctuntilchanged((c, p) => c.tolowercase() === p.tolowercase()),

toarray()

).subscribe(console.log);

//  ["a", "b", "c", "d", "e", "f", "g", "h"]

將對物件引用的比較,而不是物件屬性值得比較

from([obj,obj,obj]).pipe(distinctuntilchanged()).subscribe(console.log)

//

但是我們寫成函式進行判斷

from([,,

]).pipe(

distinctuntilchanged((p,n)=>),

).subscribe(console.log)

// //

from([,,

,,

]).pipe(

distinctuntilchanged(

(p,n)=>,/*第二個函式你可以理解成 c=>v.name

:{} 我差點矇蔽了,其實就是做了typescript做的型別限制

*/(car:)=>car.name

),).subscribe(console.log)

// //

原始碼地址

官方用法地址

ng g d delayed/delayed-input
import  from '@angular/core';

import from 'rxjs';

import from 'rxjs/operators';

@directive()

export class delayedinputdirective implements oninit,ondestroy

ngoninit() :void

ngondestroy()

}

console.log((event.target as htmlinputelement).value);

}

let a = interval(1000).pipe(

tap(v => console.log('列印下'+v)),

take(5),

// 凍住

publish()

) as connectableobservablea.subscribe(res => , err => , () => );

// 解除

a.connect();

// 列印下0

// 0

// 列印下1

// 1

// 列印下2

// 2

// 列印下3

// 3

// 列印下4

// 4

// 再見

of(10).pipe(delaywhen(_=>timer(1000))).subscribe(res=>)

// 延遲傳遞值, 傳遞的引數是一個函式,這種方法好像比較實用

let a=interval(1000).pipe(take(4))

let b=interval(1000).pipe(take(2))

zip(a,b).subscribe(console.log)

// [ 0, 0]

// [ 1, 1]

最小分母數

merge(a,b).subscribe(console.log)

// 0 兩次

// 1 兩次

// 1

// 2

// 3

concat(a,b).subscribe(console.log)

// 0

// 1

// 2

// 3

// 0

// 1

// 觀察每次狀態的改變

of(1,2,3,4,5).pipe(scan((acc,val)=>acc+val,0)).subscribe(console.log)

// 1

// 3

// 6

// 10

// 15

// 計算點選的次數

fromevent(this.ccc.nativeelement,'click').pipe(scan((acc,val)=>++acc,0)).subscribe(console.log)

of(1,2,3,4,5).pipe(max()).subscribe(console.log)

// 5

of(1,2,3,4,5).pipe(min()).subscribe(console.log)

// 1

of(1,2,3,4,5).pipe(reduce((acc,val)=>acc+val)).subscribe(console.log)

// 15

of(,).pipe(

reduce((acc,curr) => ())

).subscribe(console.log)

//

interval(200).pipe(

buffer(timer(1000))

).subscribe(console.log)

// [0,1,2,3]

//值發生一次

interval(1000).pipe(

buffer(interval(4000))

).subscribe(console.log)

// [0, 1, 2]

// [3, 4, 5, 6]

//  [7, 8, 9, 10]

// bufferwhen 引數函式 可以用陣列長度看相隔多少s點選一次

interval(1000).pipe(

bufferwhen(() => fromevent(this.ccc.nativeelement, 'click'))

).subscribe(console.log);

收集緩衝區並在指定數量的值後,作為陣列發出

const src$ = merge(

of(1).pipe(delay(1000)),

of(2).pipe(delay(4000)),

of(3).pipe(delay(5000)),

);src$.pipe(

buffercount(3)

).subscribe(console.log)

**********===

interval(1000).pipe(

buffercount(3)

).subscribe(console.log)

// [0,1,2]

// [3,4,5]

// [6,7,8]

angular中的 http服務

http是ng內建的一個服務。是簡單的封裝了瀏覽器原生的xmlhttprequest物件。 寫法1 http success functio...

Angular IOC的方式 依賴注入

依賴注入 component injectable 可以允許別的宣告在providers裡面的service等注入到被這兩個裝飾器裝飾的類中...

angular中的 q服務例項

用於理解 q服務 參考 和其它框架一樣, ng 提供了廣義的非同步 管理的機制。 http 服務是在其之上封裝出來的。這個機制就是 ng 的...