Angular面试深度解析：生命周期钩子、指令与组件通信

"Angular高频面试题，包含20个核心问题，主要涉及Angular的生命周期钩子、指令分类以及父子组件间的数据传递等关键知识点。这些题目旨在帮助面试者准备前端面试，特别是对于Angular框架有深入理解和应用的职位。" Angular框架在前端开发中扮演着重要的角色，其核心概念和特性是面试时常见的考察点。以下是对标题和描述中提到的几个关键知识点的详细说明： 1. Angular生命周期钩子： - ngOnChanges：当组件的输入属性（@Input）发生变化时触发，它接收一个SimpleChanges对象，可以用来比较新旧属性值。只在输入属性的引用发生变化时触发，不会因为简单类型（如字符串、数字）的值变化而触发。 - ngOnInit：这是组件初始化时的第一个钩子，用于一次性设置初始状态，只在组件实例化时调用一次。 - ngDoCheck：默认情况下，Angular使用 dirty checking 来检测变化。ngDoCheck 允许开发者自定义检查逻辑，会在每次变更检测周期时调用。 - ngAfterContentInit 和 ngAfterContentChecked：分别在内容投影进组件后和每次内容变更检测后调用，主要用于处理组件内的内容投影。 - ngAfterViewInit 和 ngAfterViewChecked：这两个钩子关注的是组件视图及其子视图的变化，ngAfterViewInit只调用一次，ngAfterViewChecked在每次视图变化后调用。最后，ngOnDestroy在组件销毁前调用，常用于清理资源。 2. Angular指令分类： - 组件：Angular的核心构建块，具有自己的视图和数据模型，用于构建用户界面。 - 属性指令：改变组件的外观或行为，如ngClass用于动态改变元素的CSS类，ngStyle则用于动态设置元素的样式。 - 结构指令：用于动态操作DOM，如ngIf控制元素的显示和隐藏，ngFor进行迭代，ngSwitch用于条件渲染。 3. 父子组件间的数据传递： - 父到子：父组件通过@Input装饰器将数据绑定到子组件的输入属性，如`<child [inputProp]="parentProp"></child>`。 - 子到父：子组件可以通过事件发射器（@Output装饰器）将数据传递回父组件，例如定义一个事件和方法`@Output() childEvent = new EventEmitter();`，然后在子组件中触发这个事件，父组件通过监听这个事件来接收数据。 - 使用@ViewChild：父组件可以通过这个装饰器获取子组件的引用，直接调用子组件的方法或访问其属性。 理解并熟练掌握这些知识点对Angular开发者来说至关重要，它们涵盖了框架的基本运作机制以及组件间的通信方式，对于解决实际项目中的问题和优化代码性能都有直接的帮助。在面试中能够流畅地讨论这些概念，通常会表现出面试者扎实的Angular基础和实践经验。