angular 模板语法（官方文档摘录）

2022-01-09 01:55:30

https://angular.cn/guide/template-syntax

{{}} 和"" 如果嵌套，{{}}里面求完值，""就是原意

<h3>

  {{title}}

  <img src="{{heroImageUrl}}" style="height:30px">

</h3>

但如果不嵌套，双花括号中的title和引号中的isUnchanged所引用的都是AppComponent中的属性。

{{title}}

<span [hidden]="isUnchanged">changed</span>

模板输入变量 (let hero)和模板引用变量(#heroInput)

<div *ngFor="let hero of heroes">{{hero.name}}</div>

<input #heroInput> {{heroInput.value}}

hero.name 的hero指的是let hero

模板语句Template statements

有副作用A template statement has a side effect. That's the whole point of an event. It's how you update application state from user action.

<button (click)="deleteHero()">Delete hero</button>

和表达式中一样，语句只能引用语句上下文中 —— 通常是正在绑定事件的那个组件实例。

语句上下文可以引用模板自身上下文中的属性。在下面的例子中，就把模板的$event对象、模板输入变量(let hero)和模板引用变量 (#heroForm)传给了组件中的一个事件处理器方法。

<button (click)="onSave($event)">Save</button>

<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>

<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

在上面的deleteHero(hero)中，hero是一个模板输入变量，而不是组件中的hero属性。

要想理解 Angular 绑定如何工作，重点是搞清 HTML attribute 和 DOM property 之间的区别。

attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。

少量 HTML attribute 和 property 之间有着 1:1 的映射，如id。
有些 HTML attribute 没有对应的 property，如colspan。
有些 DOM property 没有对应的 attribute，如textContent。
大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样！

最后一类尤其让人困惑…… 除非我们能理解这个普遍原则：

attribute 初始化 DOM property，然后它们的任务就完成了。property 的值可以改变；attribute 的值不能改变。

当浏览器渲染<input type="text" value="Bob">时，它将创建相应 DOM 节点，其valueproperty 被初始化为 “Bob”。

当用户在输入框中输入 “Sally” 时，DOM 元素的value property 变成了 “Sally”。但是这个 HTML value attribute 保持不变。如果我们读取 input 元素的 attribute，就会发现确实没变：input.getAttribute('value') // 返回 "Bob"。

HTML attribute value指定了初始值；DOM value property 是当前值。

disabled attribute 是另一个古怪的例子。按钮的disabled property 是false，因为默认情况下按钮是可用的。当我们添加disabled attribute 时，只要它出现了按钮的disabled property 就初始化为true，于是按钮就被禁用了。

添加或删除disabled attribute会禁用或启用这个按钮。但 attribute 的值无关紧要，这就是我们为什么没法通过 <button disabled="false">仍被禁用</button>这种写法来启用按钮。

设置按钮的disabled property（如，通过 Angular 绑定）可以禁用或启用这个按钮。这就是 property的价值。

模板绑定是通过 property 和事件来工作的，而不是 attribute。

image 元素的src属性会被绑定到组件的heroImageUrl属性上：

<img [src]="heroImageUrl">

setting a property of a directive:

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）：

<app-hero-detail [hero]="currentHero"></app-hero-detail>

不能使用属性绑定来从目标元素拉取值，也不能绑定到目标元素的属性来读取它。只能设置它。

如果必须读取目标元素上的属性或调用它的某个方法，得用另一种技术。参见 API 参考手册中的ViewChild 和 ContentChild。

方括号告诉 Angular 要计算模板表达式。如果忘了加方括号，Angular 会把这个表达式当做字符串常量看待，并用该字符串来初始化目标属性。它不会计算这个字符串。

当满足下列条件时，应该省略括号：

目标属性接受字符串值。
字符串是个固定值，可以直接合并到模块中。
这个初始值永不改变。

把HeroDetailComponent的prefix属性初始化为固定的字符串，而不是模板表达式。Angular 设置它，然后忘记它。[hero]绑定是组件的currentHero属性的活绑定，它会一直随着更新。

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

属性绑定还是插值表达式？

下列这几对绑定做的事情完全相同：

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>

<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>

<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

可读性，所以倾向于插值表达式。

但数据类型不是字符串时，就必须使用属性绑定了。

当元素没有属性可绑的时候，就必须使用 attribute 绑定。

考虑 ARIA， SVG 和 table 中的 colspan/rowspan 等 attribute。 它们是纯粹的 attribute，没有对应的属性可供绑定。

[attr.colspan]

码农公寓

属性绑定还是插值表达式？

相关文章