Angular组件树的构建过程
- 模板解析：Angular 编译器解析 HTML 模板，识别出每个组件的选择器。例如，在模板
<app-child></app-child>中，app-child 是组件选择器。
- 组件实例化：根据解析的模板，Angular 创建组件类的实例。对于每个组件，会执行其构造函数，并按照组件类定义中的属性初始化数据。
- 组件树形成：组件之间存在父子关系，父组件的模板中包含子组件的标签。当父组件实例化时，会递归地实例化其模板中包含的子组件，从而形成一棵组件树。例如，
AppComponent 模板中有 ChildComponent，ChildComponent 模板中有 GrandChildComponent，这样就形成了 AppComponent -> ChildComponent -> GrandChildComponent 的组件树结构。
依赖注入在组件树中的作用
- 依赖提供：Angular 使用依赖注入机制为组件提供所需的服务实例。例如，一个
UserService 可以被注入到多个组件中，使得这些组件能够使用 UserService 提供的功能，如获取用户信息。
- 作用域控制：依赖注入有不同的作用域。在根模块中提供的服务是单例的，整个应用只有一个实例。而在组件级别提供的服务，每个组件及其子组件会有自己的实例。例如，在
AppComponent 中提供的服务，AppComponent 及其所有子组件共享该服务实例；若在 ChildComponent 中单独提供服务，则 ChildComponent 及其子组件使用该实例，与其他组件隔离。
- 依赖解析与注入：当组件实例化时，Angular 依赖注入器会查找并注入该组件构造函数中声明的依赖。例如，若
MyComponent 构造函数为 constructor(private userService: UserService) {}，依赖注入器会查找 UserService 的实例并注入到 MyComponent 中。
优化依赖注入以提高性能并避免问题
- 避免循环依赖
- 拆分服务逻辑：将相互依赖的服务功能拆分，减少直接依赖关系。例如，如果
ServiceA 和 ServiceB 相互依赖，可以将部分功能提取到 ServiceC，让 ServiceA 和 ServiceB 依赖 ServiceC。
- 使用惰性注入：在 Angular 中，可以使用
@Inject() 装饰器和 ɵinject() 函数实现惰性注入。这允许在实际需要时才创建依赖实例，避免一开始就陷入循环依赖。
- 提高性能
- 正确设置服务作用域：尽量在根模块提供单例服务，减少不必要的实例创建。只有在确实需要每个组件有自己的服务实例时，才在组件级别提供服务。例如，对于应用全局的配置服务，在根模块提供即可。
- 使用工厂函数：对于复杂的服务创建逻辑，可以使用工厂函数来创建服务实例。这样可以在创建服务时进行更多的控制，如缓存已创建的实例，提高性能。例如：
export function userServiceFactory() {
let userServiceInstance;
return () => {
if (!userServiceInstance) {
userServiceInstance = new UserService();
}
return userServiceInstance;
};
}
providers: [
{
provide: UserService,
useFactory: userServiceFactory()
}
]
- **懒加载模块**：对于大型应用，将功能模块进行懒加载。这样只有在需要时才加载模块及其相关的服务，减少初始加载时间。例如，在路由配置中使用 `loadChildren` 来实现模块的懒加载。
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];
