这篇文章主要介绍了Angular组件中生命周期钩子的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、虚拟空间、营销软件、网站建设、枣强网站维护、网站推广。
Angular 组件生命周期钩子
其中，红色标记的生命周期钩子只调用一次，绿色部分会被反复调用，执行顺序依次由上而下。
ngOnChanges
当 Angular 设置数据绑定输入属性发生变化时响应，只对输入的不可变对象起作用。简单地讲就是，@Input 标记的属性发生变化的时候被调用，非 @Input 标记的属性改变不会调用 ngOnChanges。
ngOnInit
在第一次 ngOnChanges 执行之后调用，并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。
ngDoCheck
组件的输入属性发生变化时，将会触发 ngDoCheck 方法，我们可以使用该方法，自定义我们的检测逻辑。【相关推荐：《angular教程》】
注意：不要在 ngDoCheck 里面做非常复杂的事情，使用时要比较精准的定义检查位置，否则会造成性能问题。因为任何变化，比如鼠标的点击事件或键盘的输入事件都会触发 ngDoCheck。
变更检测
变更检测策略
ngAfterViewInit 和 ngAfterViewChecked
ngAfterViewInit 和 ngAfterViewChecked 钩子会在组件的模板的所有内容被装配完毕，组件的模板已经呈现给用户后被触发，装配过程是从子组件向父组件依次进行，而且 ngAfterViewInit 在 ngAfterViewChecked 之前被触发。
ngAfterViewInit 钩子只会在组件初始化完毕后被触发一次，而 ngAfterViewChecked 钩子在组件变更时都会被触发，所以此钩子的实现一定要精简，不然会引起性能问题。
在这两个钩子里面不能再修改组件上被绑定的属性，否则会抛出异常。
@ViewChild 装饰器和 ElementRef 元素参阅
在实际应用中，可通过这个两个元素获取视图层的 DOM 元素，对获取的 DOM 元素进行操作。
// .ts 文件中声明
@ViewChild('inputElem')
inputElem: ElementRef;
// 获取Dom元素的值
const value = this.inputElem.nativeElement.value;
// .html 文件中使用
ngAfterContentInit 和 ngAfterContentChecked
这两个钩子是在投影内容装配完成之后执行的，而那个时候整个模板还没有装配完成，所以在这两个钩子里面可以修改被绑定的属性。
投影
在某些情况下，需要动态改变组件模板的内容，而这些内容没有复杂的业务逻辑，也不需要重用，只是一小部分 HTML 片段，这个时候可以使用 Angular 提供的一个特性，叫做投影。在 Angular 里面可以使用 ng-content 指令将父组件模板中的任意片段投影到它的子组件上。
需要注意的是，自定义的组件的标签内部是不可以嵌套其他标签的，它不像一般的 HTML 标签可以嵌套，但可以使用投影实现嵌套。
app.component.html
我是父组件
这个 div 定义在父组件
这个是页头。这个 div 是父组件投影到子组件的。
