Angular笔记（二）组件
- 组件包括：
- HTML 模板: 声明页面渲染的内容
- TypeScript 类: 定义行为
- CSS 选择器: 定义组件在模板中的使用方式
- （可选）要应用在模板上的 CSS 样式
一、 创建组件:
- 使用 Angular CLI 创建一个组件
ng generate component <component-name>
得到文件夹：
组件文件 <component-name>.component.ts
模板文件 <component-name>.component.html
CSS 文件<component-name>.component.css
测试文件 <component-name>.component.spec.ts
- 指定组件的 CSS 选择器
每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里。
@Component({selector: 'app-component-overview',
})
- 定义模板，声明样式
为组件定义模板：引用外部文件，或直接写在组件内部
为组件声明样式：引用一个外部文件，或直接写在组件内部
//外部文件:
@Component({selector: 'app-component-overview',templateUrl: './component-overview.component.html',styleUrls: ['./component-overview.component.css']
})
//内部
@Component({selector: 'app-component-overview',template: `<h1>Hello World!</h1><p>This template definition spans multiple lines.</p>`styles: ['h1 { font-weight: normal; }']
})
二、生命周期
| func | 用途 | notes | tasks |
|---|---|---|---|
| ngOnChanges() | 当 Angular 设置或重新设置数据绑定的输入属性时响应 | 接受当前和上一属性值的 SimpleChanges 对象 | |
| ngOnInit() | 初始化指令/组件 | 在第一轮 ngOnChanges() 完成之后调用，只调用一次。即使没有调用过 ngOnChanges()，也仍然会调用 | 1. 获取初始数据 2. 设置输入属性初始化指令 |
| ngDoCheck() | 检测 | ||
| ngAfterContentInit() | |||
| ngAfterContentChecked() | |||
| ngAfterViewInit() | 初始化完组件视图及其子视图或包含该指令的视图之后调用 | 只调用一次 | |
| ngAfterViewChecked() | |||
| ngOnDestroy() | 销毁指令/组件之前调用并清扫 | 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。 | 1. 取消订阅可观察对象和 DOM 事件 2. 停止 interval 计时器 3. 反注册指令在全局或应用服务中注册过的所有回调 |