2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

简介: 2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程

image.png这里的星号实际上是一个语法糖,后面的ngIf称之为microsyntax,即微语法。Angular会把进行解糖操作,替换成传统的实现。值得一提的是,后者也不会出现在最后生成的html代码里

注意命名规范:image.pngNgIf是结构化指令的实现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.


image.pngstructural指令和host元素是1:1关系,attribute指令和host元素可以是N:1关系。


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


<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

image.pngThe *ngIf directive moved to the  element where it became a property binding,[ngIf].

The rest of the

, including its class attribute, moved inside the  element.


image.pngAt minimum NgFor needs a looping variable (let hero) and a list (heroes).

NgFor至少需要一个列表(heroes)和展开这个列表的变量(let hero).image.png使用微语法(一个字符串)配置结构性指令。微语法解析器把这个字符串里的内容解析成的属性:


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. 可以在模板的某一个具体实例内被使用。


image.pngimage.pngimage.png还有一种情况,某些html元素要求其子元素必须是一种特殊的类型,比如的子元素必须是, 二者中间不能再引入或者等中间层级。像下图这种设计,最后是看不到下拉菜单的:


相关文章
|
2月前
|
容器
angular之ng-template
angular之ng-template
|
3月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
34 0
|
3月前
|
索引
Angular 中的 ngFor 指令
Angular 中的 ngFor 指令
42 0
|
3月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
32 0
|
6月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
|
前端开发 JavaScript API
Angular Change Detection 的学习笔记
Angular Change Detection 的学习笔记
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
133 0
Angular Universal 学习笔记
|
前端开发 JavaScript
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】