angular基础
一个angular组件由三个部分组成
- 一个HTML模板，用于声明页面要渲染的内容
- 一个用于定义行为的TS类
- 一个CSS选择器，用于定义组件在模板中的使用方式，和CSS样式
创建一个组件
手动创建组件：一个组件文件夹内有4个文件，一个css一个html一个ts，还有一个spec.ts
- first.component.ts
//在文件的顶部，添加下面的 import 语句
import { Component } from '@angular/core';
//添加一个@component装饰器，并且为组件选择一个CSS选择器，一个HTML模板，一个模板选择样式
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
//添加一个包含组件代码的class语句
export class ComponentOverviewComponent {
}
小结：
- selector：个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里
- templateUrl： 模板是一段 HTML，它告诉 Angular 如何在应用中渲染组件。
- styleUrls： 为组件的模板声明样式
运行指令是最简单的方法:也可以自定义创建新组件的方式
//运行 ng generate component <component-name> 其中 <component-name> 是组件的名字
//该命令会创建一个文件夹，4个文件
// 一个以该组件命名的文件夹
// 一个组件文件 <component-name>.component.ts
// 一个模板文件 <component-name>.component.html
// 一个 CSS 文件， <component-name>.component.css
// 测试文件 <component-name>.component.spec.ts
生命周期钩子
首先组件是TS类，这就是你必须将每个组件视为构造方法的原因，在生命周期钩子事件中，首先执行组件类的构造函数，要将依赖注入组件，必须使用构造函数，angular首先执行构造函数，然后显式的执行其他生命周期钩子方法
接口：是挂载生命周期方法的基本工具，因为应用程序的组件类需要实现基本接口，至于视图的引入，应该触发实现接口AfterViewInit的方法，方法名ngAfterViewLint
ngOnchanges：当组件发生数据绑定属性变化时，会寻求此回调，也就是当输入控件在组件内部更新的时候，执行， Angular应用程序接收更改的数据映射，其中包含数据绑定属性的当前位置和先前位置，该位置包含在简单更改中 ， 使用此钩子来发现有关已更改的输入属性及其更改方式的详细信息
- 简单说，他可以用于所有具有输入的组件，只要值发生变化，就会调用它，他之前被称为提升ngOnInit
ngOnInit：在完成组件的创建和引入时调用，他会在Angular显示数据绑定属性时初始化，此事件尽在ngOnChanges事件之后和构造函数之后才会调用，使用此钩子，你可以初始化组件的逻辑，随着此钩子初始化ngOnChanges，所有属性ngOnInit都可以使用其所有属性，在触发此代码之前，不能使用任何子指令属性。
- 简单说，初始化组件的数据，设置初始值后，此钩子将调用，Angular默认将此钩子添加到所有组件，它只被调用一次
ngDoCheck：每当需要检查组件或者指令的输入属性时，你可以使用此回调来检查你的逻辑，简而言之，通过此挂钩，你可以在组建中实现的逻辑进行自定义检查，此钩子立即按需ngOnlnit发出，即使组件没有变化，也会执行此挂钩，如果Angular未能检测到输入属性的任何变化，那么这个钩子就会出现问题
- 简单说：由Angular运行以检测任何更改，被称为变化检测
ngAfterContentInit： Angular可以在标记内使用此方法包含外部子组件。在组件的整个生命周期中，此挂钩被调用一次。 仅在ngDoCheck调用后使用，通过初始化内容来完成工作
ngAfterContentChecked在 ngContentInit完成其执行以开始
ngAfterViewInit：在视图初始化之后调用一次
ngAfterViewChecked：完成检查和初始化之后调用一次
ngOnDestroy：会从DOM中删除组件之前的调用
