Angular5小結--模板語法

時間 2019-12-05

標籤 angular5 angular 小結模板語法欄目 AngularJS 简体版

原文原文鏈接

不合法的HTML: <script>__、<html>、<body>和<base>。html

不合法的插值表達式與模板語句：express

賦值 (=, +=, -=, ...)
new運算符
使用;或,的鏈式表達式
自增或自減操做符 (++和--)
不支持位運算|和&
具備新的模板表達式運算符，好比|、?.和!。

同名變量的優先級： 表達式中的上下文變量是由**模板變量、指令的上下文變量（若是有）和組件的成員**疊加而成的,且只能引用表達式上下文中的成員（什麼console.log，window,do啊不能使用）。若是咱們要引用的變量名存在於一個以上的命名空間中，模板變量>指令>組件api

**HTML Attribute與DOM Property的區別：**這樣理解，attrbute是html與生俱來的，一旦初始化沒法改變的; property是XML中擁有的attr「超集」，在Angular中，全部模板綁定的是property，而不是attribute。（理解參考沒法經過修改attr來修改disabled按鈕的使用）安全

屬性綁定的方括號[]: 當屬性是一個不變的值，能夠省略方括號，如：app

<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

attribute屬性綁定： 像下面這段代碼，沒法直接綁定屬性colspan，由於colspan沒有對應的property。ide

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>   
<tr><td [attr.colspan]="{{1 + 1}}">Three-Four</td></tr> //使用[attr.xx]的形式綁定對應的attribute

class類名綁定：[class.myclassName]="ifShort" ,綁定多個類使用ngClass,將[ngClass]="setClassObj",setClassObj在組件類邏輯中定義設置其值的方法。ui

setClass() {
    this.setClassObj = {
        classA : this.isA,
        classB : this.isB  //由isA isB的布爾值控制對應的classA、classB
    }
}

同理ngstryle和[style.XXX]是同樣的使用場景this

ngModule指令的使用：[(ngModule)]使用前必定要記得導入formModule，單純的值雙向綁定用ngModule，複雜的綁定仍是使用展開形式spa

*內置指令NgIf NgSwitch NgForOf: 注意：一個元素上只能使用一個內置指令；NgIf有一個很好的做用--防範空指針錯誤：當一個表達式嘗試訪問空值的屬性時，Angular就會拋出一個異常；NgFor="xxx"當中，XXX是「微語法」而不是模板表達式，NgFor中獲取循環索引使用index，防止相同item的銷燬與建立使用trackBy，如ngfor = "let item of items; let i = index; track: trackByFun", 詳見API;雙向綁定

#myform="ngForm"模板引用： 這樣的引用使得myform成爲了ngForm指令的引用（前提是該組件導入了formModule）。

@output()和@input():

// 1.
@Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...

// 2.
@Directive({
  outputs: ['clicks:myClick']  // propertyName:alias
})

操做符（| ？！）： 安全操做符"？"能夠避免NgIf和&&的繁瑣判斷；非空斷言操做符"！"不會防止出現null或undefined。它只是告訴 TypeScript 的類型檢查器對特定的屬性表達式，不作 "嚴格空值檢測"