天天看點

2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程

2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程

NgIf是結構化指令的實作class,ngif是指令的屬性名,應用在HTML代碼裡。

除了structural指令外,Angular常用的還有Component指令和屬性指令兩種。

A component manages a region of HTML in the manner of a native HTML element. Technically it’s a directive with a template.

An attribute directive changes the appearance or behavior of an element, component, or another directive. For example, the built-in NgStyle directive changes several element styles at the same time.

2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程

structural指令和host元素是1:1關系,attribute指令和host元素可以是N:1關系。

NgIf takes a boolean expression and makes an entire chunk of the DOM appear or disappear.

2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程
2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程
2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程

使用微文法(一個字元串)配置結構性指令。微文法解析器把這個字元串裡的内容解析成的屬性:

The parser translates let hero, let i, and let odd into variables named let-hero, let-i, and let-odd.

As the NgFor directive loops through the list, it sets and resets properties of its own context object. These properties can include, but aren’t limited to, index, odd, and a special property named $implicit.

NgFor周遊list,在每次循環過程體内部設定它自己上下文對象的屬性,比如index,odd和$implicit.

Template input variable

A template input variable is a variable whose value you can reference within a single instance of the template. 可以在模闆的某一個具體執行個體内被使用。

2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程

裡面包含的元素不會出現在最後的HTML頁面裡:

2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程
2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程
2020國慶節 Angular structual 指令學習筆記(<ng-template>) 包含文法糖解糖過程

還有一種情況,某些html元素要求其子元素必須是一種特殊的類型,比如的子元素必須是, 二者中間不能再引入或者等中間層級。像下圖這種設計,最後是看不到下拉菜單的:是一種grouping element,不會幹預HTML正常的布局和樣式,因為Angular不會将其渲染到最終的HTML中去。

繼續閱讀