组件和模板-模板语法

使用插值表达式显示组件属性

    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>

• 模板中的 HTML

几乎所有的 HTML 语法都是有效的模板语法。 但值得注意的例外是

有些合法的 HTML 被用在模板中是没有意义的。、 和 元素这个舞台上中并没有扮演有用的角色。

可以通过组件和指令来扩展模板中的 HTML 词汇。

• 插值表达式 {{…}}

插值其实是一个特殊语法，Angular 会把它转换为属性绑定。

默认情况下，插值表达式会用双花括号 {{和 }} 作为分隔符。
如果你想用别的分隔符来代替 {{ 和 }}，也可以通过 Component 元数据中的 interpolation 选项来配置插值分隔符。eg：

 interpolation: ['@@', '@@']

<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
<img [src]="itemImageUrl2">

• 模板语句

模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。eg：

(event)="statement"

Angular 提供了各种各样的数据绑定，绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

单向从数据源到视图	{{expression}}，[target]=“expression”
从视图到数据源的单向绑定	(target)=“statement”
双向	[(target)]=“expression”

HTML attribute 与 DOM property 的对比

<button [disabled]="isUnchanged">Save</button>

要想理解 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 节点， 它的 value 这个 property 被初始化为 “Bob”。

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

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

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

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

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

就算名字相同，HTML attribute 和 DOM property 也不是同一样东西。

这句话值得再强调一次： 模板绑定是通过 property 和事件来工作的，而不是 attribute。

下面的方式都是正确的 ：

<p><img src="{{heroImageUrl}}"> is the <i>插值语法</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>属性绑定</i> image.</p>

attribute 绑定

下面会报错：

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

使用：[attr.colspan]=“1 + 1”

 <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

css类绑定

<div [class.special]="isSpecial">The class binding is special</div>

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
// 带有单位的情况：
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

<div [ngClass]="{'special': isSpecial}"></div>

结构指令：

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
<li *ngFor="let item of items; index as i; ">...</li>

安全导航操作符 ( ?. ) 和空属性路径

The current hero's name is {{currentHero?.name}}

按键事件过滤（通过 key.enter）

<input #box (keyup.enter)="onEnter(box.value)">
<input (keyup.enter)="onEnter($event)">

生命周期钩子

指令和组件的实例有一个生命周期：当 Angular 新建、更新和销毁它们时触发。 通过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。
每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。比如，OnInit 接口的钩子方法叫做 ngOnInit。
ngOnChanges()，ngOnInit()，ngAfterViewInit()，ngOnDestroy()。。。

ngOnChanges() 当 Angular（重新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象

在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
在第一轮 ngOnChanges() 完成之后调用，只调用一次。
ngAfterViewInit() 每当 Angular 初始化完组件视图及其子视图之后调用。

第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngOnDestroy() 没当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。

在 Angular 销毁指令/组件之前调用。

ngOnChanges()：
app.component.html：

<app-customer-dashboard [name]="name"></app-customer-dashboard>
<input type="text" [(ngModel)]="name">

app.component.ts：

  name = 'sss';

customer-dashboard.component.html:

<p>
  customer-dashboard works!-------name:{{name}}
</p>

customer-dashboard.component.ts:

export class CustomerDashboardComponent implements OnInit, OnChanges {

  constructor() {
  }

  @Input() name: any;

  ngOnInit() {

    console.log('name:', this.name);
  }
  ngOnChanges() {
    console.log('name变化了的');
  }
  ngAfterViewInit() {
    console.log('ngAfterViewInit');
  }
}

父组件input输入框改变值的时候，name改变，那么子组件中name值也是实时改变的！！！！
此时ngOnChanges事件执行了的！！！

注：对引用类型无效（地址值一直没有改变）

执行顺序：
changes，onInit，afterViewInit，
当name变化时，changes还是会执行（changes会执行多次的！）