Angular 面试题

对于拥有 2 年 Angular 使用经验的人来说，面试问题通常涵盖从基础概念到中级主题的各种主题。以下是一些常见问题的分类列表：

基本概念

什么是 Angular，它与 AngularJS 有何不同？
Angular 的构成要素是什么？
解释组件和指令之间的区别。
什么是数据绑定？它的类型有哪些？
Angular CLI 的用途是什么？你能说出一些 CLI 命令吗？
什么是 TypeScript，为什么在 Angular 中使用它？

组件和模板

什么是组件？如何创建和使用它？
@Input()解释和装饰器的作用@Output()。
模板驱动表单和反应表单之间有什么区别？
如何处理 Angular 模板中的事件？
什么是生命周期钩子？你能说出它们的名字并解释它们的用途吗？
如何在 Angular 模板中实现条件渲染？

指令

什么是 Angular 指令？它们如何分类？
结构指令和属性指令之间有什么区别？
如何创建自定义指令？
ngIf解释、ngFor和的用途ngClass。

服务和依赖注入

Angular 中的服务是什么？如何创建服务？
什么是依赖注入？Angular 是如何实现它的？
单例服务的目的是什么？
providedIn: 'root'解释和在特定模块中提供服务之间的区别。

路由

路由在 Angular 中如何工作？
RouterModule和的目的是什么Routes？
如何在 Angular 中实现延迟加载？
什么是路线守卫？有哪些类型的守卫？
如何在 Angular 路由中传递参数？

表格

反应表单和模板驱动表单之间有什么区别？
如何在 Angular 中执行表单验证？
如何将表单数据绑定到组件？

HTTP 和可观察对象

如何在 Angular 中发出 HTTP 请求？
该模块的用途是什么HttpClient？
什么是可观察对象？它在 Angular 中如何使用？
Promise和有什么区别Observable？

Angular 模块

NgModules 的用途是什么？
解释功能模块和共享模块之间的区别。
如何将 Angular 应用程序组织成模块？

性能和优化

什么是 AOT（提前）编译？为什么它很重要？
Angular 如何处理树摇？
有哪些方法可以优化 Angular 应用程序？

各种各样的

什么是 Angular Pipes？如何创建自定义管道？
AngularngOnInit和构造函数之间有什么区别？
Angular 的目的是什么zone.js？
什么是拦截器？它们在 Angular 中如何使用？
解释 Angular 中变化检测的作用。
trackBy该函数的作用是什么ngFor？

实际场景

如何调试 Angular 应用程序？
您将如何处理加载缓慢的 Angular 应用程序？
描述您参与过的一个项目以及您在团队中的角色。
如何管理 Angular 项目中的版本控制？

以下是您列出的所有 Angular 面试问题的综合答案，按主题组织：

基本概念

什么是 Angular，它与 AngularJS 有何不同？
- Angular 是一个基于 TypeScript 的前端框架，用于构建动态单页应用。AngularJS (v1.x) 基于 JavaScript，并使用双向绑定架构。Angular 通过预先 (AOT) 编译、基于组件的架构和依赖注入来提升性能。
Angular 的构成要素是什么？
- Angular 的主要组成部分是：
  - 模块（例如 NgModules）
  - 成分
  - 模板
  - 指令
  - 服务
  - 依赖注入
  - 管道
  - 路由
解释组件和指令之间的区别。
- 组件控制视图，具有模板和样式，是 UI 的主要构建块。
- 指令修改 DOM 元素的行为或外观。
  - 结构指令：改变 DOM 结构（例如*ngIf，，*ngFor）。
  - 属性指令：改变元素的外观或行为（例如ngClass，ngStyle）。
什么是数据绑定？它的类型有哪些？
- 数据绑定连接 UI 和应用程序逻辑。类型：
  - 插值：（{{data}}从组件到视图的单向）。
  - 属性绑定：（[property]="expression"单向）。
  - 事件绑定：（(event)="handler()"从视图到组件的单向）。
  - 双向绑定：（[(ngModel)]="property"双向）。
Angular CLI 的用途是什么？你能说出一些 CLI 命令吗？
- CLI 可自动创建、测试和部署应用程序。常用命令：
  - ng new <app-name>：创建一个新的 Angular 应用程序。
  - ng serve：在本地运行应用程序。
  - ng generate <component|service> <name>：生成组件或服务。
  - ng build：构建项目以供部署。
  - ng test：运行单元测试。
什么是 TypeScript，为什么在 Angular 中使用它？
- TypeScript 是 JavaScript 的超集，添加了静态类型。Angular 使用 TypeScript 来提供更好的工具、可维护性和早期错误检测功能。

组件和模板

什么是组件？如何创建和使用它？
- 组件是 Angular UI 的基本构建块。它通过模板和逻辑控制 UI 的一部分。
  - 创造：ng generate component <name>
  - <app-name></app-name>使用：在 HTML 中添加选择器（例如）。
@Input()解释和装饰器的作用@Output()。
- @Input()：将数据从父组件传递到子组件。
- @Output()：使用从子级向父级发出事件EventEmitter。
模板驱动表单和反应表单之间有什么区别？
- 模板驱动表单：在 HTML 模板中定义表单；对于小表单来说更简单。
- 反应式表单FormGroup：使用和在组件类中定义表单FormControl；更适合动态和复杂的表单。
如何处理 Angular 模板中的事件？
- 使用事件绑定语法：(event)="handlerFunction()"。例如：<button (click)="onClick()">Click Me</button>
什么是生命周期钩子？你能说出它们的名字并解释它们的用途吗？
- 生命周期钩子允许开发者利用组件事件。示例：
  - ngOnInit()：组件初始化后执行。
  - ngOnChanges()：当输入属性改变时执行。
  - ngOnDestroy()：在组件被销毁之前执行。
如何在 Angular 模板中实现条件渲染？
- 使用*ngIf：
```
 <div *ngIf="condition">Content</div>
```

指令

什么是 Angular 指令？它们如何分类？
- 指令是操作 DOM 的指令。
  - 结构指令：修改 DOM 结构（例如*ngIf，*ngFor）。
  - 属性指令：修改元素行为或外观（例如ngStyle，ngClass）。
结构指令和属性指令之间有什么区别？
- 结构：更改 DOM 布局（例如，添加/删除元素）。
- 属性：改变元素的外观或行为。

如何创建自定义指令？

使用@Directive装饰器。例如：

 @Directive({
   selector: '[appHighlight]'
 })
 export class HighlightDirective {
   constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'yellow';
   }
 }

ngIf解释、ngFor和的用途ngClass。
- ngIf：有条件地添加/删除元素。
- ngFor：迭代列表。
- ngClass：动态应用类。

服务和依赖注入

Angular 中的服务是什么？如何创建服务？
- 服务包含可重用的业务逻辑。使用 CLI 创建它：
```
 ng generate service serviceName
```
什么是依赖注入？Angular 是如何实现它的？
- DI 是一种设计模式，其依赖项是提供给类的，而不是由类创建的。Angular 使用注入器层次结构来实现 DI。
单例服务的目的是什么？
- 单例服务确保在整个应用程序中共享该服务的单个实例。
providedIn: 'root'解释和在特定模块中提供服务之间的区别。
- providedIn: 'root'：使该服务在整个应用程序范围内可用。
- 在模块中提供：限制该模块的可用性。

Angular 中的路由

路由在 Angular 中如何工作？

Angular 路由允许在单页应用程序（SPA）内的视图（组件）之间导航。
路由器监听 URL 变化并使用路由配置将其映射到特定组件。
例子：

 const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'about', component: AboutComponent },
   { path: '', redirectTo: 'home', pathMatch: 'full' }
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

RouterModule和的目的是什么Routes？
- RouterModule：提供路由所需的服务和指令（例如<router-outlet>，routerLink）。
- Routes：定义 URL 路径到组件的映射。它是一个对象数组，每个对象代表一个路由。

例子：

   const routes: Routes = [
     { path: 'dashboard', component: DashboardComponent },
     { path: 'profile', component: ProfileComponent }
   ];

如何在 Angular 中实现延迟加载？
- 延迟加载仅在访问相关路由时才加载功能模块，从而减少初始捆绑包的大小。
- 步骤：
  1. 创建功能模块（例如AdminModule）。
  2. 在功能模块内定义路线。
  3. 使用loadChildren应用程序路由中的属性指向功能模块。

例子：

   const routes: Routes = [
     { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
   ];

在AdminModule：

   const adminRoutes: Routes = [
     { path: '', component: AdminDashboardComponent }
   ];
   @NgModule({
     imports: [RouterModule.forChild(adminRoutes)],
     exports: [RouterModule]
   })
   export class AdminRoutingModule {}

什么是路线守卫？有哪些类型的守卫？
- 路线守卫根据条件控制往返路线的导航。
- 警卫类型：
  - CanActivate：确定路线是否可以激活。
  - CanActivateChild：确定子路由是否可以激活。
  - CanDeactivate：确定用户是否可以离开路线。
  - 解析：在路由激活之前预取数据。
  - CanLoad：确定模块是否可以延迟加载。

例如CanActivate：

   @Injectable({
     providedIn: 'root'
   })
   export class AuthGuard implements CanActivate {
     canActivate(): boolean {
       return isAuthenticated(); // Custom logic
     }
   }

在路线中应用守卫：

   const routes: Routes = [
     { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
   ];

如何在 Angular 路由中传递参数？

路线参数：
- 定义带参数的路由：

   const routes: Routes = [
     { path: 'profile/:id', component: ProfileComponent }
   ];

 - Access the parameter in the component:

   ```typescript
   constructor(private route: ActivatedRoute) {}
   ngOnInit() {
     this.route.params.subscribe(params => {
       console.log(params['id']);
     });
   }
   ```

查询参数：

传递查询参数：

   <a [routerLink]="['/profile']" [queryParams]="{ id: 123 }">Profile</a>

在组件中访问查询参数：

   constructor(private route: ActivatedRoute) {}
   ngOnInit() {
     this.route.queryParams.subscribe(params => {
       console.log(params['id']);
     });
   }

表格

反应表单和模板驱动表单之间有什么区别？
- 反应形式：
  - 在组件中使用FormGroup和以编程方式定义FormControl。
  - 更具可扩展性和可测试性。
  - 非常适合动态形式。
- 模板驱动表单：
  - 在模板中使用类似这样的指令进行定义ngModel。
  - 更简单，适合小型形式。

如何在 Angular 中执行表单验证？

反应式表单：以编程方式添加验证器：

 this.myForm = new FormGroup({
   name: new FormControl('', [Validators.required, Validators.minLength(3)])
 });

模板驱动表单：在模板中使用验证指令：

 <input name="name" ngModel required minlength="3" />

如何将表单数据绑定到组件？
- 反应形式：使用FormGroup和FormControl绑定。
- 模板驱动表单：[(ngModel)]="property"用于双向绑定。

HTTP 和可观察对象

如何在 Angular 中发出 HTTP 请求？

使用HttpClient模块：

 this.http.get('api/url').subscribe(data => console.log(data));

HttpClient 模块的用途是什么？
- 简化 HTTP 请求并处理请求标头、响应和错误处理等任务。它还支持可观察对象。
什么是可观察对象？它在 Angular 中如何使用？
- 可观察对象是可以随时间发出多个值的数据流。Angular 使用可观察对象进行异步操作，例如 HTTP 调用和事件处理。
Promise 和 Observable 之间有什么区别？
- 承诺：发出单一值并且不可取消。
- Observable：发出多个值，可以取消，并支持map和等操作符filter。

Angular 模块

NgModules 的用途是什么？
- NgModules 将组件、指令、管道和服务分组为内聚块，以组织和模块化 Angular 应用程序。
解释功能模块和共享模块之间的区别。
- 功能模块：包含特定于功能的组件、服务和指令。
- 共享模块：包含可重复使用的组件、管道和指令，可导入到其他模块。
如何将 Angular 应用程序组织成模块？
- 为单个功能创建功能模块、为可重用代码创建共享模块以及为单例服务创建核心模块。

性能和优化

什么是 AOT（提前）编译？为什么它很重要？
- AOT 在构建时将 Angular HTML 和 TypeScript 编译为 JavaScript，从而减少运行时开销并提高性能。
Angular 如何处理树摇？
- 树摇会在构建过程中删除未使用的模块和代码，从而减少捆绑包的大小。
有哪些方法可以优化 Angular 应用程序？
- 对路线使用延迟加载。
- 使用最小化变化检测OnPush。
- 优化模板绑定。
- 启用 AOT 编译。
- 使用轻量级库。

各种各样的

什么是 Angular Pipes？如何创建自定义管道？

管道用于转换模板中的数据。创建自定义管道：

 @Pipe({ name: 'customPipe' })
 export class CustomPipe implements PipeTransform {
   transform(value: string): string {
     return value.toUpperCase();
   }
 }

ngOnInitAngular 的和构造函数有什么区别？
- 构造函数：用于依赖注入。
- ngOnInit：组件初始化后执行，适合初始化逻辑。
Angular 的 zone.js 的用途是什么？
- zone.js拦截并跟踪异步任务，实现 Angular 的变化检测。

什么是拦截器？它们在 Angular 中如何使用？

拦截器拦截 HTTP 请求和响应，以执行诸如添加标头或处理错误之类的任务。

 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler) {
     const authReq = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
     return next.handle(authReq);
   }
 }

解释 Angular 中变化检测的作用。
- 每当组件中的数据发生变化时，变化检测就会更新 DOM。策略：
  - 默认：检查整个组件树。
  - OnPush：仅当输入属性发生变化时检查。
trackBy该函数的作用是什么ngFor？
- 通过使用唯一标识符跟踪项目来优化渲染。防止不必要的 DOM 更新。

实际场景

如何调试 Angular 应用程序？
- 使用浏览器开发工具、Angular DevTools 和console.log()。
- 使用网络工具调试 HTTP 调用。
- 检查控制台中的错误并调查堆栈跟踪。
您将如何处理加载缓慢的 Angular 应用程序？
- 实现延迟加载和AOT编译。
- 优化绑定并使用OnPush变更检测策略。
- 尽量减少模板中的繁重计算。
描述您参与过的一个项目以及您在团队中的角色。
- 准备一个项目的简明描述，突出您在实现功能、解决问题或优化性能方面所扮演的角色。
如何管理 Angular 项目中的版本控制？
- 使用 Git 进行版本控制。遵循以下实践：创建分支、提交更改并添加有意义的信息，以及使用拉取请求进行代码审查。

让我们关注高级概念和现实世界场景：

架构和最佳实践

如何设计可扩展的 Angular 应用程序架构？
- 回答：
  - 使用具有功能模块的模块化架构来实现特定功能。
  - 为可重用组件和管道实现共享模块。
  - 使用核心模块进行单例服务。
  - 应用延迟加载来优化大型应用程序。
  - 遵循 SOLID 原则进行组件和服务设计。

如何处理 Angular 应用程序中的状态管理？
- 回答：
  - 使用 NgRx、Akita 等库或带有 BehaviorSubjects 的服务。
  - 使用选择器、效果和减速器等功能为复杂应用程序实现 NgRx。
  - 使用OnPush变化检测策略来提高性能。
  - immer通过使用类似库或纯 JavaScript 技术来确保不变性。

如何确保团队项目中的编码标准一致？
- 回答：
  - 使用Angular Style Guide来实现一致的结构。
  - 使用ESLint或TSLint强制执行 linting 规则。
  - 实现更漂亮的代码格式化。
  - 使用Husky设置预提交钩子来运行 linters 和单元测试。
  - 定期进行代码审查并鼓励结对编程。

性能优化

如何优化 Angular 应用程序的性能？
- 回答：
  - 启用预先 (AOT)编译以实现更快的渲染。
  - 对模块使用延迟加载和预加载策略。
  - 优化模板绑定并最小化观察者ChangeDetectionStrategy.OnPush。
  - 避免大型 DOM 操作并在指令中使用 Angular 的trackBy 。ngFor
  - 使用 RxJS 操作符缓存 HTTP 请求，例如shareReplay。

您使用什么工具和技术来调试 Angular 应用程序？
- 回答：
  - 使用Augury或Angular DevTools进行组件树调试。
  - 使用浏览器 DevTools 的网络选项卡调试 HTTP 调用。
  - 添加console.log或 Angular 的DebugElement进行运行时检查。
  - 使用 RxJS 调试技术tap或类似RxJS Spy 的库。
  - 使用Lighthouse或Webpack Bundle Analyzer等工具监控性能。

高级主题

Angular 如何在更深层次上处理依赖注入？
- 回答：
  - Angular 使用分层依赖注入系统。
  - AppModule中声明的提供程序在整个应用程序中共享。
  - 延迟加载模块中的提供程序会创建自己的实例。
  - 多提供商令牌允许同一个注入令牌具有多个值。
  - 用于@Inject解析令牌和@Optional()可选依赖项。

解释 Angular Compiler 在优化性能中的作用。
- 回答：
  - Angular 编译器在构建过程中使用 AOT 预编译模板和组件。
  - 它通过及早发现问题来减少运行时错误并提高安全性。
  - 生成优化的 JavaScript 代码，启用树摇动来删除未使用的代码。

Zone.js 和 Angular 的变化检测有什么区别？
- 回答：
  - Zone.js：跟踪异步操作（例如，HTTP 调用、事件）以触发变更检测。
  - 变化检测：根据应用程序状态的变化更新 DOM。
  - 用于ChangeDetectorRef微调或手动触发变化检测。

测试

如何确保大型 Angular 应用程序的稳健测试？
- 回答：
  - 使用 Jasmine 和 Karma 为组件、服务和管道编写单元测试。
  - 使用 Angular 测试实用程序（如）编写集成测试TestBed。
  - 使用Protractor 或 Cypress 进行端到端 (E2E)测试。
  - 使用Jest或 Angular 的测试实用程序等库模拟依赖项。
  - 保持高代码覆盖率并在 CI/CD 管道中集成测试。

在 Angular 测试中，您使用什么策略来模拟 HTTP 请求？

回答：

使用 AngularHttpTestingController在单元测试中模拟 HTTP 请求。
例子：

it('should fetch data', () => {
  service.getData().subscribe(data => {
    expect(data).toEqual(mockData);
  });
  const req = httpTestingController.expectOne('api/data');
  req.flush(mockData);
});

现实世界的挑战

如何处理 Angular 中的应用程序安全性？
- 回答：
  - 使用 Angular 的DomSanitizer净化用户输入。
  - {{}}通过使用 Angular 的模板绑定（）并避免直接 DOM 操作来避免跨站点脚本（XSS）。
  - 使用 Angular 的内置CSRF 保护。
  - 使用 HTTPS 保护 HTTP 调用并将身份验证令牌添加到标头。

如何处理大型 Angular 项目中的版本升级？
- 回答：
  - 使用Angular 更新指南制定分步升级计划。
  - 逐步升级 Angular CLI 和依赖项。
  - 每次升级后运行单元测试和端到端测试。
  - 逐步重构已弃用的 API。

如何管理 Angular 应用程序中的功能切换？
- 回答：
  - 使用配置文件或服务来动态切换功能。
  - 利用NgRx Store或自定义状态管理进行功能切换。
  - 根据功能切换标志隐藏或显示 UI 元素。

企业级实践

什么是微前端架构，Angular 如何实现它？
- 回答：
  - 微前端将大型应用程序拆分成更小的、可独立部署的模块。
  - 使用 Webpack 中的Module Federation等框架来动态加载 Angular 模块。
  - 使用共享服务或库确保微前端之间的通信。

如何在 Angular 中使用动态验证来管理大规模表单？
- 回答：
  - 使用Reactive Forms进行动态验证。
  - 使用配置对象构建动态表单控件。
  - 使用自定义验证器验证输入。
  - 利用FormArray来处理表单控件的动态集合。

这些问题强调的是实际应用、高级概念以及高级 Angular 开发者应具备的最佳实践。如果您需要更多示例或更深入地了解任何主题，请告诉我！

文章来源：https://dev.to/renukapatil/angular-interview-questions-4i4k