Angular笔记2

核心知识
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架，Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。
架构：
根模块：AppModule
模板：把 HTML 和 Angular 的标记（markup）组合起来
指令：会提供程序逻辑
数据绑定：包括属性绑定（数据插入到 HTML 中）和事件绑定（响应用户操作更新数据）
双向数据绑定：响应用户操作更新数据,并将数据插入到 HTML 中
管道：用来转换要显示的值
服务类：处理与视图无关并希望跨组件共享的数据或逻辑
依赖注入（或 DI，Dependency injection）： 相当于import，依赖不一定是服务 —— 它还可能是函数或值。

模块：xx.module.ts
组建：xx.component.ts
服务：xx.service.ts

{{xx}}:插值表达式
[xx]:属性绑定
(xx):事件绑定
[(xx)]:双向绑定
|：管道

*ngFor：循环语句，例：

*ngIf：条件语句，例：，只有当选中的英雄存在时，它才会包含 HeroDetail 组件。

属性型指令： 在模板中，它们看起来就像普通的 HTML 属性一样，因此得名“属性型指令”。

结构型指令：星号（*）开头

通过 $event 对象取得用户输入
[template](https://angular.cn/api/core/Component#template):  `  
{{values}}
当用户按下并释放一个按键时，触发 keyup 事件，Angular 在 $event 变量提供一个相应的 DOM 事件对象，上面的代码将它作为参数传递给 onKey() 方法。

src/app/keyup.components.ts (class v.1)

export class KeyUpComponent_v1 {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

传入 $event 是靠不住的做法
类型化事件对象揭露了重要的一点，即反对把整个 DOM 事件传到方法中，因为这样组件会知道太多模板的信息。 只有当它知道更多它本不应了解的 HTML 实现细节时，它才能提取信息。 这就违反了模板（用户看到的）和组件（应用如何处理用户数据）之间的分离关注原则。

从模板变量获得输入框比通过 $event 对象更加简单。 下面的代码重写了之前 keyup 示例，它使用变量来获得用户输入。
src/app/keyup.components.ts (v2)
@Component({
  selector: 'app-key-up2',
  template: `
    
    
{{values}}
  `
})
export class KeyUpComponent_v2 {
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }
}
这个方法最漂亮的一点是：组件代码从视图中获得了干净的数据值。再也不用了解 $event 变量及其结构了。

生命周期钩子：ngOnChanges()、ngOnInit()、ngDoCheck()、ngAfterContentInit()、ngAfterContentChecked()、ngAfterViewInit()、ngAfterViewChecked()、ngOnDestroy()

Angular 会把 *[ngFor](https://angular.cn/api/common/NgForOf) 用同样的方式把星号（）语法的 [template](https://angular.cn/api/core/Component#template)属性转换成 元素*。

 ({{i}}) {{hero.name}} 
    
({{i}}) {{hero.name}}
  

`[ngFor](https://angular.cn/api/common/NgForOf)` 字符串*之外*的每一样东西都会留在宿主元素（`
`）上，也就是说它移到了 `` 内部。 在这个例子中，`[[ngClass](https://angular.cn/api/common/NgClass)]="[odd](https://angular.cn/api/common/NgForOfContext#odd)"` 留在了 `
` 上。

### 微语法[](https://angular.cn/guide/structural-directives#microsyntax "Link to this heading")

Angular 微语法能让你通过简短的、友好的字符串来配置一个指令。 微语法解析器把这个字符串翻译成 `` 上的属性：

*   `let` 关键字声明一个[模板输入变量](https://angular.cn/guide/structural-directives#template-input-variable)，你会在模板中引用它。本例子中，这个输入变量就是 `hero`、`i` 和 `[odd](https://angular.cn/api/common/NgForOfContext#odd)`。 解析器会把 `let hero`、`let i` 和 `let [odd](https://angular.cn/api/common/NgForOfContext#odd)` 翻译成命名变量 `let-hero`、`let-i` 和 `let-odd`。

*   微语法解析器接收 `of` 和 `trackby`，把它们首字母大写（`of` -> `Of`, `trackBy` -> `TrackBy`）， 并且给它们加上指令的属性名（`[ngFor](https://angular.cn/api/common/NgForOf)`）前缀，最终生成的名字是 `[ngForOf](https://angular.cn/api/common/NgForOf)` 和 `[ngForTrackBy](https://angular.cn/api/common/NgForOf#ngForTrackBy)`。 还有两个 `NgFor` 的*输入属性*，指令据此了解到列表是 `heroes`，而 track-by 函数是 `[trackById](https://angular.cn/api/core/IterableChangeRecord#trackById)`。

*   `NgFor` 指令在列表上循环，每个循环中都会设置和重置它自己的*上下文*对象上的属性。 这些属性包括 `index` 和 `[odd](https://angular.cn/api/common/NgForOfContext#odd)` 以及一个特殊的属性名 `$implicit`（隐式变量）。

*   `let-i` 和 `let-odd` 变量是通过 `let i=index` 和 `let [odd](https://angular.cn/api/common/NgForOfContext#odd)=[odd](https://angular.cn/api/common/NgForOfContext#odd)` 来定义的。 Angular 把它们设置为*上下文*对象中的 `index` 和 `[odd](https://angular.cn/api/common/NgForOfContext#odd)` 属性的当前值。

*   这里并没有指定 `let-hero` 的上下文属性。它的来源是隐式的。 Angular 将 `let-hero` 设置为此上下文中 `$implicit` 属性的值， 它是由 `NgFor` 用当前迭代中的英雄初始化的。

*   [API 参考手册](https://angular.cn/api/common/NgForOf "API: NgFor")中描述了 `NgFor` 指令的其它属性和上下文属性。

*   `NgFor` 是由 `[NgForOf](https://angular.cn/api/common/NgForOf)` 指令来实现的。请参阅 [NgForOf API 参考手册](https://angular.cn/api/common/NgForOf)来了解 `[NgForOf](https://angular.cn/api/common/NgForOf)` 指令的更多属性及其上下文属性。