Angular學習筆記(十一)之響應式程式設計基礎

2021-08-14 22:55:02 字數 1652 閱讀 1141

觀察者模式以及在rxjs中對應的概念和**樣例

非同步資料流程式設計,可以建立任何事件流。

觀察流(陣列),選出偶數流,計算平方,列印出來

import from '@angular/forms';

imports: [

formsmodule

]import from 'rxjs';

var subscription = observable.from([1,2,3,4])

.filter((e)=>e%2==0)

.map

((e)=>e*e)

.subscribe

( e => console.log(e),

error => console.error(error),

() => console.log("結束啦!"))

在上方例子中:

流可以做以下操作

- 發射元素,型別取決於流源頭,在這是乙個number型別的陣列

- 丟擲異常

- 發射結束訊號

對應的觀察者也可以做出以下操作

- 處理流中發射的元素

- 處理流中的異常

- 流結束時呼叫函式

//html:

"text" (keyup)="onkey($event)">

//ts:

onkey(event)

event.target指向發射事件的html元素,而其實,在angular模版中可以使用本地變數」#」獲得發射事件html元素

//html:

type="text" #myfile (keyup)="onkey(myfile.value)">

//ts:

onkey(value)

也就是 $event.target 可以用 #myfile來代替

寫乙個輸入框,當輸入文字暫停500毫秒時,會觸發事件列印出輸入的文字

import from

'@angular/forms';

imports: [

formsmodule,

reactiveformsmodule

]//html:

"searchinput">

//[formcontrol] 表單指令

//searchinput 例項化的formcontrol物件,其valuechange可組成訂閱流

//ts:

import from

'@angular/forms';

import 'rxjs/rx';

searchinput:formcontrol = new formcontrol();

ngoninit()

getstock(value)

tips:使用formcontrol時,需要在modlue同時匯入formsmodule和reactiveformsmodule從@angular/forms模組

Angular學習筆記 Angular生命週期

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

Angular學習筆記

1.nodejs 2.npm 3.cnpm 4.yarn 4.vscode 1.建立專案的 命令 ng new project name style scss 引數 style 使用的css型別,可以是css,sacc,scss,less,預設值是css 2.初始化node modules 命令 1...

angular學習筆記

時隔一年之後重新學習angularjs,感慨良多。去年剛剛接觸web程式設計的時候,朋友告訴我angularjs很好用,於是在僅僅了解html和css開始學習angularjs,困難程度可想而之,而且並不明白其價值,武斷的認為通過服務端可以不需要angular之類的工具解決所有問題。一年之後,對js...