Angular从程序引导启动、再到创建、销毁,组件动作都有一系列钩子事件，
可以在相应的钩子里，做对应的业务逻辑

ngOnChanges() 属性变更通知

当所有绑定属性的值发生变化结束后触发， 不常用

ngOnInit() 组件初始化

组件初始化完成后，数据变更检测前触发。
此时组件的模板 template 值已经写入DOM树当中，在这里适合做数据请求与处理

ngDoCheck() 变更检测

不管是否有数据,到了改检测的周期时，变会触发，这是一个高频率触发，不适宜做处理

ngAfterContentInit()

官方定义： 当 Angular 把外部内容投影进组件视图之后调用。
Respond after Angular projects external content into the component’s view.

ngAfterViewInit()

官方定义： 会在 Angular 完全初始化组件视图及其子视图后调用。
A lifecycle hook that is called after Angular has fully initialized a component’s view.

@ViewChild() 和 @ContentChild()

@ViewChild 用来获取当前模板中出现的组件对象

@ContentChild 用来获取当前模板的<ng-content></ng-content>里面出现的组件对象

eg.
例如 假设最外容器为user-list

@Viewchild用法如下：

1
2
3
4
5
6
7
8
9
10
11
12

@Component({
    selector: 'user-list',
    template: `<user-detail></user-detail>`
})
export class UserListComponent {
    @ViewChild(UserDetailComponent) userDetailComp: UserDetailComponent;
    ngAfterViewInit() { 
        // this.userDetailComp 获取用户 user-detail 组件
    }
}

@ContentChild用法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 用户列表
@Component({
    selector: 'user-list',
    template: `
        <user-detail>
            <h2>订单列表</h2><user-trade></user-trade> 
        </user-detail>
    `
    
})
export class UserListComponent {}


// 用户详情组件
@Component({
    selector: 'user-detail',
    template: `
        用户明细
        <ng-content></ng-content>
    `
})
export class UserDetailComponent {
    @ContentChild(UserTradeComponent) tradeComp: UserTradeComponent;
    ngAfterViewInit() { 
        // this.tradeComp 
    }
}

首先，user-deatil 内部必须包含 <ng-content></ng-content> ,
才能显示 <h2>订单列表</h2><user-trade></user-trade> 内容。
其次，通过 @ContentChild() 来获取<ng-content></ng-content>里面内容的组件。

tips

• 在组件标签的内部，不要放任何内容 —— 除非想把这些内容投影进这个组件中。
• <ng-content> 标签是外来内容的占位符。 它告诉 Angular 在哪里插入这些外来内容

总结

AfterContent 钩子优先于 AfterView 钩子。
因为在组件遇到 ng-content 时，需要先处理完，才会继续后面的部分。

AfterView 钩子所关心的是 ViewChildren，这些子组件的元素标签,会直接出现在该组件的模板里面。

AfterContent 钩子所关心的是 ContentChildren，这些子组件被 Angular 投影进该组件中。

ngOnDestroy() 销毁

组件销毁之前触发。
会做一些unsubscribe。来避免页面销毁后，仍有订阅接收，造成内存占用过大。

angular2+ 的 DI (dependency inject)

依赖注入是angular的一种设计模式。
angular 为了解决数据共享和逻辑复用，引入了服务（service）
(一般，在service只做与视图无关的逻辑，比如从服务器拉取数据、验证客户输入等)
service就是提供一些特殊功能的class,应用程序中各种组件和指令都有可能需要这个服务提供的功能。
通过angular的依赖注入，这些具有特殊功能的服务可以被任何组件注入并使用。
只需要构建依赖关系，告诉angular这里依赖serviceA，不需要通过new来实例化，也不需要关心服务中的constructor需要传递什么参数。在providers注入之后，所有组件都可在构造函数中注入这个服务，并且所有组件用的是同一个实例，数据共享，这个特性可以用来在组件之间传值。