angular的學習高階 十七

資料

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() 
}

}

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

這段時間專案開發用到angular，深感js基礎不紮實導致的囫圇吞棗，為了高效的學習，記錄下一些經常用到的指令，服務。q file filereader file uploader ui select 通過 http 繫結外表來選擇 有乙個疑問 jquery angular s ui router ...

C 高階學習第十七天

2 fileinfo類 3 directory類 絕對路徑 string path users neworigion desktop a.txt 相對路徑 b.txt 當前目錄是當前程式生成的可執行檔案的目錄 file.create path file.delete path 對檔案內容的一種資料快...

Angular學習筆記 Angular生命週期

生命週期函式通俗的講就是元件建立 元件更新 元件銷毀的時候會觸發的一系列的方法。當 angular 使用建構函式新建乙個元件或指令後，就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法。當 angular 使用建構函式新建乙個元件或指令後，就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法 鉤子用途...