angular筆記

關於 /deep/ 的使用

由於/deep/會對子組件的樣式造成破壞(覆蓋子組件原本的樣式)，在開發中建議儘量避免使用/deep/

私有屬性只能在 @Component 所在的 class 內部訪問，在 template 文件中不能訪問私有屬性

Cannot find name ‘require’

修改 tsconfig.app.json
增加：

"types": [
  "node"
]

完整示例如下：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

在 webstorm 中無法識別 angular 的指令和屬性？

routerLink 之類的屬性、*ngIf 之類的指令，默認情況下無法識別，提示”unknown tag not allow here”，此時需按照如下步驟解決問題：
1. setting – languages & frameworks – javascript – libraries – download – angular
1. 下載 angular.js ，將其添加到工程所在的目錄中

動態組件的開發

1. 若動態內容，在組件的內部不需要重複出現，可使用 ng-content
2. 若動態內容，在組件內部存在重複使用的情況，可使用*ngTemplateOutlet

attr. 的使用場景

設置 HTML 標籤特性使用 attr.attributeName，設置 DOM 特性時，直接使用屬性綁定。

模板插值相關

不能用的：

1. 帶有 new 運算符的表達式
2. 賦值表達式
3. 帶有 ; 或者 , 的鏈式表達式
4. 帶有自增或者自減操作的表達式
5. 不支持位運算，| 在模板表達式中是管道
6. 模板表達式不能引用任何全局命名空間中的成員，比如：window、console

其中使用場景 1、2、3、4 是可能引發副作用的 javascript 表達式

Currency Pipe

語法格式：
expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
參數 currencyCode 表示要格式化的目標貨幣格式，其值爲 ISO 4217 貨幣碼，如：CNY 爲人民幣，
USD 爲美元，EUR 爲歐元等。
參數 symbolDisplay 表示以該類型爲貨幣的哪種顯示格式，其值爲 Boolean 類型，true 表示
貨幣符號，如：$ 等，false 則表示顯示 ISO 4217 貨幣碼，如：CNY、USD 等。
參數 digitInfo 參照 DecimalPipe 管道中的格式說明。

關於管道

純管道

如果所轉換的目標是對象，修改對象的內部屬性，並不會執行 transform 函數。

非純管道

angular 組件在每個變化週期都會監測並執行 transform 函數。

快速引用 node_modules 中的 css 文件

使用：@import "~bootstrap/dist/css/bootstrap.css"; 相當於：@import "../node_modules/bootstrap/dist/css/bootstrap.css";，
“~” 前綴和 node_modules 的路徑相等。詳情請點擊鏈接查看。