Angular中如何在组件完全加载后调用函数？

body onload之所以无效，是因为Angular组件的渲染生命周期和原生HTML的页面加载事件完全脱节——当body onload触发时，你的Angular组件可能还在初始化过程中，根本没完成渲染。

下面是几种Angular原生的解决方案：

• 使用ngAfterViewInit生命周期钩子
  这是最适合的场景：当组件及其所有子视图都完成初始化、DOM元素已经渲染完成后，Angular会自动调用这个钩子。如果你的函数需要操作组件内的DOM，优先用这个。

  示例代码：

  import { Component, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css']
  })
  export class YourComponentComponent implements AfterViewInit {
  
    ngAfterViewInit(): void {
      // 在这里调用你的函数
      this.yourFunction();
    }
  
    yourFunction(): void {
      console.log('组件完全加载完成，函数执行');
      // 你的业务逻辑
    }
  }
  

• 使用ngOnInit（无需操作DOM时）
  如果你的函数只需要初始化数据，不需要访问组件的DOM或子组件，ngOnInit足够用——它会在组件的输入属性绑定完成后立即触发，比ngAfterViewInit更早执行。

  示例代码：

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css']
  })
  export class YourComponentComponent implements OnInit {
  
    ngOnInit(): void {
      this.yourFunction();
    }
  
    yourFunction(): void {
      console.log('组件初始化完成，函数执行');
    }
  }
  

• 针对路由加载的组件（额外场景）
  如果你的组件是通过路由跳转加载的，还可以监听路由的导航完成事件，但大部分情况下，上面的生命周期钩子已经能满足需求。

内容的提问来源于stack exchange，提问作者DjAlms