---
# System prepended metadata

title: TODO

---

# TODO


JS Dollar sign string模板字樣
`apiUrl(`${this.apiPrefix}`);`
https://stackoverflow.com/questions/35835362/what-does-dollar-sign-and-curly-braces-mean-in-a-string-in-javascript

---

Day04
![](https://i.imgur.com/sh1ogbe.png)
去除spec.ts的過程


Day05
關於資料夾的分層

Day06
繫結就是綁變數，所以如果要固定寫死一串字 需要`''`
HP遞增的動畫gif
this是什麼
小心沒member編譯錯誤

Day06
事件繫結
(change)
(keyUp) (keyDown)
事件一定是由玩家主動觸發、或者達成什麼條件(ex: 超時了)

Day08
`{'小劍': 5}`
變數 x_atk = 11

Day10
互不衝突的Angular原理
![](https://i.imgur.com/Ezq4IWi.png)

Day13
Angular height100% vh100 坑

Day14
`index.html`簡短 流程

Day15
typescript單引號為主

Day18
Any Key `[key: string]: string`
TS 型別 `:` vs `<>`


Day19 20
其實你可以這樣做 物件Interface

Day22
Proxy的設置的坑 是相對路徑。有新舊兩種做法，新版寫在`angular.json`、舊版加在`package.json`
http.get預設解析json，純文字需要加`responseType`
`return this.http.get("/UserLogin",{params, responseType: 'text'});`
![](https://i.imgur.com/dnpHvrs.png)



Day25
巢狀routing怎麼處理 loadChildren
很複雜，還牽涉到component宣告在哪一層module

Day30~33 form 嚴格空檢查模式抽一篇出來講
https://www.angularjswiki.com/angular/object-is-possibly-null-error-fix/

Day ??

指定不同port運行
    
    > ng serve --port 4201
    > npm start -- --port 4201


## Service 相關

UseValue
https://fullstackladder.dev/blog/2018/11/05/mastering-angular-21-ngmodule-providers-2/

HTTP攔截器
[HttpInterceptor](https://fullstackladder.dev/blog/2017/10/29/angular-advanced-handle-http-request-with-interceptor/)

![](https://i.imgur.com/XjXU4GO.png)

InjectionToken
https://ithelp.ithome.com.tw/articles/10208630

## ng cli generate


### 產生 module + routing

    > ng g m pageManagement --routing
    駝峰或減號
    > ng g m page-management --routing


### 產生 component + module

    > ng g c {{要在哪炸出鍋的相對路徑}} --module={{模組的相對路徑}}

用法1
    
    > cd 到目的地(要ng g c的位置)
    > ng g c abilityList --module=../doctor-ability.module.ts

用法2

    > cd 到目的地的上一層
    > ng g c modal/editAbility --module=doctor-ability.module.ts



![](https://i.imgur.com/z0mvsgL.png)


https://stackoverflow.com/questions/40649799/create-component-add-it-to-a-specific-module-with-angular-cli

---

* nvm use 版本

    > npm start
    > ng serve

`npm` 吃 `package.json` 這支檔案
`package-lock.json`
![](https://i.imgur.com/MLEKX88.png)


`ng-cli` 吃 `angular.json` 這支檔案


[ngFor inedx從1開始](https://stackoverflow.com/questions/39057119/angular-start-ngfor-index-from-1)



npm publish library


---

### let-item

![](https://i.imgur.com/zHr6ypF.png)

樣板中有型別的方法

https://www.damirscorner.com/blog/posts/20211203-StronglyTypedNgTemplateInAngular.html


### export index.ts, and import from it

https://ithelp.ithome.com.tw/articles/10280543

![](https://i.imgur.com/3lUiN5g.png)

![](https://i.imgur.com/0vXZp1t.png)


### load local file

load json

http.get('filePath.json')

https://stackoverflow.com/questions/44042223/load-json-content-from-a-local-file-with-http-get-in-angular-2

---


## typescript 型別

做firebase auth時
型別內沒有對應的key，但想取出response的數值

## Object to string 字串處理

其實也可以用`String()`直接把返回物件變成string來handle

![](https://i.imgur.com/M1ZKHT9.png)

https://stackoverflow.com/questions/5612787/converting-an-object-to-a-string


### 善用 as 

* `as keyof`

![](https://i.imgur.com/8QlVGVZ.png)

![](https://i.imgur.com/sSu3rL6.png)

* `as any`
![](https://i.imgur.com/dTwhKha.png)




* 或者在套件裡面加上 `[key:string]: any;`

![](https://i.imgur.com/HwzFsOY.png)


* 額外用function轉型

![](https://i.imgur.com/sCxMIK7.png)


https://stackoverflow.com/questions/38324949/error-ts2339-property-x-does-not-exist-on-type-y

https://stackoverflow.com/questions/57086672/element-implicitly-has-an-any-type-because-expression-of-type-string-cant-b


---


three dot delete key

https://stackoverflow.com/questions/57255901/is-it-possible-to-use-the-spread-operator-three-dots-except-specific-keys


https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object