Angular笔记（二）组件

• 组件包括：

• HTML 模板: 声明页面渲染的内容
• TypeScript 类: 定义行为
• CSS 选择器: 定义组件在模板中的使用方式
• （可选）要应用在模板上的 CSS 样式

一、 创建组件:

1. 使用 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

2. 指定组件的 CSS 选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里。

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

3. 定义模板，声明样式

为组件定义模板：引用外部文件，或直接写在组件内部
为组件声明样式：引用一个外部文件，或直接写在组件内部

//外部文件:
@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. 反注册指令在全局或应用服务中注册过的所有回调