面试题答案
一键面试1. ngIf和ngSwitch的选择
- ngIf：用于根据条件动态添加或移除DOM元素。它会完全销毁和重建DOM及其内部的组件和指令，适用于条件判断较少且条件之间切换不频繁的场景。例如，在用户登录后，根据登录状态决定是否显示用户相关操作按钮。
- ngSwitch：用于在多个条件之间进行选择并显示相应的内容。它通过切换现有DOM元素的显示或隐藏来工作，而不是像ngIf那样完全销毁和重建DOM。适用于有多个互斥条件且条件之间切换频繁的场景，如根据用户角色显示不同的菜单选项。在这种情况下，ngSwitch可以避免频繁的DOM创建和销毁，从而提高性能。
2. ngIf指令触发的检测机制
- 变更检测：Angular使用变更检测机制来检查组件状态是否发生变化。当使用ngIf指令时，每次变更检测运行时，都会检查ngIf绑定的条件表达式的值。如果表达式的值发生变化，Angular会根据新的值决定是创建还是销毁对应的DOM元素及其内部的组件和指令。
- 脏检查：Angular默认采用脏检查机制，即检测组件及其子组件树中所有绑定的值是否发生变化。ngIf指令的条件表达式也在这个检测范围内。当应用程序中的数据发生变化时，可能会触发不必要的变更检测，即使ngIf的条件表达式值并未改变。
3. 避免不必要的视图创建和销毁
- 缓存数据：如果ngIf条件表达式依赖的数据变化频繁，但实际影响ngIf结果的情况较少，可以考虑缓存相关数据。例如，将需要判断的数据提前处理并缓存起来，减少不必要的计算，只有当真正影响ngIf条件的值发生变化时，才重新计算条件表达式。
- 防抖和节流：对于可能频繁触发导致ngIf条件变化的事件（如用户输入事件），可以使用防抖或节流技术。防抖可以确保在一段时间内多次触发事件时，只执行一次回调函数；节流则是在一定时间间隔内只允许执行一次回调函数。这样可以减少不必要的变更检测和视图创建/销毁操作。
- 使用结构性指令组合：在某些情况下，可以将ngIf与其他结构性指令（如ngFor）结合使用时，注意指令的顺序。例如，先使用ngFor循环生成列表，再在列表项上使用ngIf根据特定条件显示或隐藏部分项，而不是先使用ngIf判断是否显示整个列表。这样可以避免在ngIf条件变化时，整个列表的重建。
- 优化条件表达式：确保ngIf绑定的条件表达式尽可能简单高效。避免在条件表达式中执行复杂的计算或函数调用，因为每次变更检测时都会重新执行这些表达式。如果必须进行复杂计算，可以将计算结果缓存起来，或者使用RxJS的Observable来处理异步数据，通过订阅来更新ngIf的条件。