Angular基础

组件（Angular Components）

组件概述

组件是 Angular 应用的主要构造块。每个组件包括如下部分：
- 一个 HTML 模板，用于声明页面要渲染的内容
- 一个用于定义行为的 Typescript 类
- 一个 CSS 选择器，用于定义组件在模板中的使用方式
- （可选）要应用在模板上的 CSS 样式

先决条件：要创建一个组件，请先验证你是否满足以下先决条件：

安装 Angular CLI
创建一个带有初始项目的 Angular 工作区。如果还没有项目，你可以用 ng new <project-name> 创建一个，其中 <project-name> 是你的 Angular 应用的名字。
使用Angular CLI创建组件
在终端窗口中，导航到要放置你应用的目录。
运行 ng generate component <component-name> 命令，其中 <component-name> 是新组件的名字。

默认情况下，该命令会创建以下内容：

一个以该组件命名的文件夹
一个组件文件 <component-name>.component.ts
一个模板文件 <component-name>.component.html
一个 CSS 文件， <component-name>.component.css
测试文件 <component-name>.component.spec.ts

其中 <component-name> 是组件的名称。

手动创建组件

导航到你的 Angular 项目目录。
创建一个新文件 <component-name>.component.ts 。
在文件的顶部，添加下面的 import 语句。

content_copyimport { Component } from '@angular/core';
在 import 语句之后，添加一个 @Component 装饰器。

content_copy@Component({ })
为组件选择一个 CSS 选择器。

content_copy@Component({ selector: 'app-component-overview', })

定义组件用以显示信息的 HTML 模板。在大多数情况下，这个模板是一个单独的 HTML 文件。

content_copy@Component({  
	selector: 'app-component-overview',  
templateUrl: './component-overview.component.html', 
})

为组件的模板选择样式。在大多数情况下，你可以在单独的文件中定义组件模板的样式。

  content_copy@Component({  
  	selector: 'app-component-overview',  
  	templateUrl: './component-overview.component.html',  
  	styleUrls: ['./component-overview.component.css'] 
  })

添加一个包含该组件代码 class 语句。

content_copyexport class ComponentOverviewComponent { }

指定组件的CSS选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里。例如，考虑一个组件 hello-world.component.ts ，它的选择器定义为 app-hello-world 。当 <app-hello-world> 出现在模板中时，这个选择器就会让 Angular 实例化该组件。
在 @Component 装饰器中添加一个 selector 语句来指定组件的选择器。

@Component({
  selector: 'app-component-overview',
})

定义一个组件的模板

模板是一段 HTML，它告诉 Angular 如何在应用中渲染组件。可以通过以下两种方式之一为组件定义模板：
- 引用外部文件
- 直接写在组件内部。

要把模板定义为外部文件，就要把 templateUrl 添加到 @Component 装饰器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

要在组件中定义模板，就要把一个 template 属性添加到 @Component 中，该属性的内容是要使用的 HTML。
- ```
@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
})
```

如果你想让模板跨越多行，可以使用反引号（ ` ）。

@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
})

Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。

声明组件的样式：

有两种方式可以为组件的模板声明样式：
- 引用一个外部文件
- 直接写在组件内部。

要在单独的文件中声明组件的样式，就要把 styleUrls 属性添加到 @Component 装饰器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

要想在组件内部声明样式，就要把 styles 属性添加到 @Component，该属性的内容是你要用的样式。styles 属性接受一个包含 CSS 规则的字符串数组。
- ```
@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})
```

组件生命周期

生命周期钩子（Lifecycle hook）

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。
你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。
一种接口，它允许你监听指令和组件的生命周期，比如创建、更新和销毁等。

响应生命周期事件

每个接口只有一个钩子方法，方法名是接口名加前缀 ng。例如，OnInit 接口的钩子方法名为 ngOnInit。
Angular 会按以下顺序调用钩子方法：
- ngOnChanges - 在输入属性 (input)/输出属性 (output)的绑定值发生变化时调用。
- ngOnInit - 在第一次 ngOnChanges 完成后调用。
- ngDoCheck - 开发者自定义变更检测。
- ngAfterContentInit - 在组件内容初始化后调用。
- ngAfterContentChecked - 在组件内容每次检查后调用。
- ngAfterViewInit - 在组件视图初始化后调用。
- ngAfterViewChecked - 在组件视图每次检查后调用。
- ngOnDestroy - 在指令销毁前调用

初始化组件或指令

使用 ngOnInit() 方法执行以下初始化任务。

在构造函数外部执行复杂的初始化。组件的构造应该既便宜又安全。比如，你不应该在组件构造函数中获取数据。当在测试中创建组件时或者决定显示它之前，你不应该担心新组件会尝试联系远程服务器。
在 Angular 设置好输入属性之后设置组件。构造函数应该只把初始局部变量设置为简单的值。

请记住，只有在构造完成之后才会设置指令的数据绑定输入属性。如果要根据这些属性对指令进行初始化，请在运行 ngOnInit() 时设置它们。

ngOnChanges() 方法是你能访问这些属性的第一次机会。Angular 会在调用 ngOnInit() 之前调用 ngOnChanges()，而且之后还会调用多次。但它只调用一次 ngOnInit()。

在实例销毁时进行清理

把清理逻辑放进 ngOnDestroy() 中，这个逻辑就必然会在 Angular 销毁该指令之前运行。

这里是释放资源的地方，这些资源不会自动被垃圾回收。如果你不这样做，就存在内存泄漏的风险。

取消订阅可观察对象和 DOM 事件。
停止 interval 计时器。
反注册该指令在全局或应用服务中注册过的所有回调。

ngOnDestroy() 方法也可以用来通知应用程序的其它部分，该组件即将消失。

Angular基础

Angular基础

Angular基础

组件（Angular Components）

组件概述

先决条件：要创建一个组件，请先验证你是否满足以下先决条件：

使用Angular CLI创建组件

手动创建组件

指定组件的CSS选择器

定义一个组件的模板

声明组件的样式：

组件生命周期

生命周期钩子（Lifecycle hook）

响应生命周期事件

初始化组件或指令

在实例销毁时进行清理

视图封装

模板

指令

依赖注入