搜狗截图20190917144402.png

    组件中的 implements onInit 可以不写 ，生命周期函数的沟子也一样会被调用的 但是不删也有一个好处： 起到一个约束的作用 ngInit 这个函数误删了，会报错 implements oninit 是一个接口
    接口是可选的，也就是说只要有类似ngOnInit 这样的方法存在，生命周期的沟子函数还是会被执行的 但建议实现接口，好处一个是不会由于误删某个沟子函数 另一个对组件涉及到的哪些生命周期一目了然

    构造函数，永远第一个被调用。

    ngOninit 组件初始化被调用 ， 在这个组件中 我们可以 安全的使用组件的属性和方法

    ngOnChanges(_changes_: SimpleChanges): void {<br /> console.log('输入属性改变', changes);<br /> }

    • 我们看到输入属性 changes 是一个字典型的对象，这个对象的 key值是你输入属性的名字
    • backgroundColor , indicatorColor 等等
    • value 值是： 当前值 ， 第一次的值， 前一次的值
    • 官方认为 ngOnchanges 和 ngDoCheck 不能同时存在于同一个组件当中
    • onChanges 是对自己组件本身 的一个检测，而doChange 是在整个大的一个框架下面要做的。
    • onChanges 在组件的@Input 属性发生变化的时候调用
    • changes 是一个 （索引）字典型的对象
    1.  ngAfterContentInit(): void {
    2.     console.log('组件内容初始化');
    3.   }
    5.   ngAfterContentChecked(): void {
    6.     console.log('组件内容脏值检测');
    7.   }
    • 这两个检查都是多次的、
    1. ngAfterViewInit(): void {
    2.   console.log('组件的视图初始化完成');
    3. }

    一个组件和它的子组件都初始化完成了 AfterViewInit 脏值检测一般都是多次的

    1. ngAfterViewChecked(): void {
    2.   console.log('组件的视图的脏值检测');
    3. }
    1. 组件构造调用
    2. scrollable-tab.component.ts:25 输入属性改变 {menus: SimpleChange, backgroundColor: SimpleChange}
    3. scrollable-tab.component.ts:29 组件初始化
    4. scrollable-tab.component.ts:37 组件内容初始化
    5. scrollable-tab.component.ts:41 组件内容脏值检测
    6. scrollable-tab.component.ts:44 组件的视图初始化完成
    7. scrollable-tab.component.ts:47 组件的视图的脏值检测
    8. core.js:38780 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
    9. scrollable-tab.component.ts:41 组件内容脏值检测
    10. scrollable-tab.component.ts:47 组件的视图的脏值检测

    • 组件是红色的时候销毁

      1. <app-scrollable-tab
      2. [menus]="topMenus"
      3. (tabSelected)="handleTabSelected($event)"
      4. [backgroundColor]="scrollableTabBgColor"
      5. *ngIf="scrollableTabBgColor === 'red'"
      6. >
      7. <div>hello</div>
      8. </app-scrollable-tab>

    • 需要做一些清楚的时候 setTimeout