组件挂载阶段

挂载阶段中的生命周期函数在组件的整个生命周期中只执行一次，页面更新时不再执行。

1. constructor

   在组件类被实例化时执行, 可以给它传递参数从而获取组件想要使用的服务。

   xxxxxxxxxx
   export class AppComponent  {
     constructor(private te: 
                  ElementRef) {
       console.log(te)
     }
   }
   

2. ngOnInit

   ngOnInit 在组件首次接收到输入属性值后执行，如果该组件没有绑定输入属性，也会执行。

   xxxxxxxxxx
   <!-- app.component.html -->
   <app-init-test name="张三"></app-init-test>
   

   xxxxxxxxxx
   //组件类文件init-test.component.ts
   export class InitTestComponent implements OnInit {
     @Input() name = ''
     constructor() { }
   
     ngOnInit(): void {
       console.log('ngOnInit',this.name)
     }
   
   }
   

3. ngAfterContentInit

   当投影内容初始渲染完成后调用。

   xxxxxxxxxx
   <!-- app.component.html -->
   <app-init-test >
       <div #box>hello</div>
   </app-init-test>
   

   xxxxxxxxxx
   //组件类文件init-test.component.ts
   export class InitTestComponent implements AfterContentInit {
       //使用@ContentChild获取ng-content的内容
     @ContentChild('box')     box:ElementRef<HTMLDivElement>|undefined
     constructor() { }
     ngAfterContentInit(): void {
       console.log(this.box,'ngAfterContentInit')
         //<div #box>hello</div>
     }
    
   
   }
   

4. ngAfterViewInit

   当组件跟其子组件视图渲染完成后调用。

   xxxxxxxxxx
   <!-- 组件模板文件 -->
   <p #container>
       init-test works!
   </p>
   

   xxxxxxxxxx
   //组件类文件
   export class InitTestComponent implements AfterViewInit{
     @ViewChild('container') container:ElementRef<HTMLParagraphElement>|undefined
     constructor() { }
     ngAfterViewInit(): void {
       console.log(this.container,'ngAfterViewInit')
     }
   }
   
   

实时效果反馈

1.下列描述错误的是：

A construct在组件实例化的时候被调用

B ngOnInit钩子函数中还不可以获取到输入属性

C ngOnInit在生命周期中只会被调用一次

D ngAfterViewInit在生命周期中只会被调用一次

答案

1=>B