HarveyChou
|
1f6eff2cdf
|
NgModelGroup 表單範例
可以使用MgModelGroup,將ngModel結合成一個group
|
2 years ago |
HarveyChou
|
04a409ffbb
|
ngForm表單範例
|
2 years ago |
HarveyChou
|
0a1f3bf84a
|
ngModel加入範本參考變數
|
2 years ago |
HarveyChou
|
6d39774248
|
利用NgModel定義表單模型屬性
透過ngModel紀錄在condition中,讓元件程式可以使用此屬性進行查詢
|
2 years ago |
HarveyChou
|
87ab8aebfd
|
@Host裝飾器
將元件的父層元素作為尋找注入實體的結束位置
<app-parent>
<app-child/>
</app-parent>
|
2 years ago |
HarveyChou
|
8fd056e445
|
@Self裝飾器
指定使用當下注入器,若當前未設定,則會拋出例外
|
2 years ago |
HarveyChou
|
a65445da8f
|
@Optional 選擇性注入
@SkipSelf()會忽略當錢provider,從使用的父元件開始尋找提供者
|
2 years ago |
HarveyChou
|
04ed2d5a29
|
HttpClient 把資料傳到後端服務
this.heep.pose<Task[]>(url,tasks);
使用HTTP_INTERCEPTORS攔截http請求,依據需求作其他處理
ng generate interceptor [component]
|
2 years ago |
HarveyChou
|
e02327cd32
|
Async Timer使用,實作subscribe跟unsubscribe
如果未取消unsubscribe,則會造成重複執行,降低效能
|
2 years ago |
HarveyChou
|
2ee49d413e
|
AsyncPipe 加入as關鍵字,建立範本區域變數,紀錄遠端傳回的清單資料
|
2 years ago |
HarveyChou
|
ddc8e2af5a
|
AsyncPipe
透過AsyncPipe訂閱task$屬性
|
2 years ago |
HarveyChou
|
1900c0e758
|
HttpClient取得遠端資料
app.component內部subscribe未註冊,程式碼範例無法註冊使用
|
2 years ago |
HarveyChou
|
fb01bb33eb
|
Merge branch 'master' of http://www.origtek.com:2999/HarveyChou/AngularLearn
|
2 years ago |
HarveyMac
|
5d8ca49605
|
使用相同token,指定多種provider
|
2 years ago |
HarveyMac
|
c6818ba1e1
|
Injection Token
建立InjectionToken型別變數來產生token
|
2 years ago |
HarveyMac
|
1d27146504
|
string Token
使用字串作為Inject token
|
2 years ago |
HarveyMac
|
6fdc2b3792
|
Service 單獨在個別個別component使用
provider可以使用範圍,在component中使用useValue,可以將可以將service限制在指定module中
|
2 years ago |
HarveyMac
|
d8c39876e6
|
FactoryService使用
可以使用useFactory設定條件,來使用不同的Service
|
2 years ago |
HarveyMac
|
0947394269
|
useValue抽象服務
可將物件實體抽換掉服務類別,可以透過建立間諜SPY物件模擬測試情境
|
2 years ago |
HarveyMac
|
776711cc2a
|
useExisting 抽象服務
跟useClass類似,但不會建立新的實體,而是去使用當前已存在的
如果不存在任何實體則會拋出例外,可以用這種方式減少被重複建立的實體
|
2 years ago |
HarveyMac
|
13726233ea
|
UseClass抽象服務
App.component內部provider使用useClass:OrderDiscountService
可以直接抽換原本的訂單服務,降低改版對於整體的影響
|
2 years ago |
HarveyMac
|
861c679ce1
|
Service Interaction ,Service 水平互動
APP.component初始化Service Value
font-size 使用畫面改變Value
other則顯示出則顯示出Value值
|
2 years ago |
HarveyMac
|
d506925fb7
|
使用service注入功能
task.service的gettasks,注入app.component.ts constructor
|
2 years ago |
HarveyMac
|
6e9b7d075a
|
自訂Pipe使用,使用 ng generate pipe [管道名稱]
本範例使用自訂Orderby排序
|
2 years ago |
HarveyMac
|
db845bfee2
|
DatePipe,詳細請查閱網路用法
|
2 years ago |
HarveyMac
|
93245b6bc7
|
CurrencyPipe
|
2 years ago |
HarveyMac
|
cc3a013026
|
PercentPipe
{{value_expression | percent [:'digitsInfo' [:local]}}
|
2 years ago |
HarveyMac
|
9679033e34
|
數值資料顯示-DecimalPipe
|
2 years ago |
HarveyMac
|
691065d11b
|
KeyValuePipe
可以提取出陣列中的陣列中的keyValue
|
2 years ago |
HarveyMac
|
ee9fae2d12
|
SlicePipe,可以做文字排版切割,起始位置從0算起
{{value_expressiong |slice: start [:end]}}
也可以套用在陣列中
|
2 years ago |
HarveyMac
|
3e094d0490
|
使用angular 內部pipe,做顯示文字格式的改變
只改變顯示文字,而不改變文字內容
|
2 years ago |
HarveyMac
|
5bd08dfd5c
|
@HostBinding 裝飾器
可以設定class屬性,去影響宿主元素
|
2 years ago |
HarveyMac
|
084ded3405
|
@HostListener 裝飾器
可以用來listen mouseover跟mouseout事件
改變顏色
|
2 years ago |
HarveyChou
|
c89e69a77c
|
自訂結構型指令 Structural Directive
可以使用user Name來定義使用權限,顯示使用者可視或不可視區域
|
2 years ago |
HarveyChou
|
81f605ef39
|
自訂改變元素行為的屬性行指令
使用者按下按鈕後,會透過@HostListener擷取按鈕事件,讓使用者確認後觸發confirm事件,讓父元件執行所需作業
|
2 years ago |
HarveyChou
|
44795b7dfc
|
@directive Exports as 用法
用以取得自訂按紐指令實體
|
2 years ago |
HarveyChou
|
e0cad3232f
|
自訂Angular 指令 ==> 自訂變更元素樣式的屬性型指令(Attribute directive)
|
2 years ago |
HarveyChou
|
dea772bd15
|
ngComponentOutlet 範例
|
2 years ago |
HarveyChou
|
7f6d0b3765
|
ngSwitch 多條件判斷
|
2 years ago |
HarveyChou
|
aa2d25fae5
|
ngIf 將元素list移至 ng-template
|
2 years ago |
HarveyChou
|
a76881a140
|
ngIf 跟 else 實作
|
2 years ago |
HarveyChou
|
186bdbf526
|
ngFor 跟 traackBy用法,trackBy用法可以用以重新渲染功能
|
2 years ago |
HarveyChou
|
e9b3941c98
|
[Doc] LearnPowerPoint
|
2 years ago |
HarveyChou
|
0c38fa1d20
|
頁面檢視的初始and變更檢測
|
2 years ago |
HarveyChou
|
4d8b9ba8b3
|
動態內容投影,初始以及變更檢測
使用數個ngContent演示,在網頁執行階段的啟動時機
|
2 years ago |
HarveyChou
|
3364218bf4
|
Merge branch 'master' of http://www.origtek.com:2999/HarveyChou/AngularLearn
|
2 years ago |
HarveyChou
|
4d0125ab5c
|
ngDoCheck 生命週期鉤子範例程式碼
|
2 years ago |
HarveyChou
|
ed2175ad79
|
生命週期
使用 ngOnChanges 生命週期鉤子,要使用F12在browser裡確認回收機制
|
2 years ago |
HarveyChou
|
510a4a0f65
|
動態內容投影 ng-content Select功能
標籤(Tag) Select="標籤名" Ex:select="h2"
樣式類別(Class) select=".類別名稱" Ex:select=".className"
屬性(Attribute) select="[屬性名稱]" Ex:select="[attrName]"
|
2 years ago |
HarveyChou
|
37bf0612a0
|
動態內容投影 ng-content Select功能
|
2 years ago |