Angular面试题｜2024最新高频考点与深度解析

答：NgModule是Angular的模块化机制，用于组织应用代码。它解决了以下问题：

• 代码组织：将相关组件、服务、管道分组
• 依赖管理：通过imports引入其他模块，exports导出供他人使用
• 懒加载支持：通过loadChildren实现路由级懒加载
• 编译优化：仅编译模块内声明的组件模板

例如，HttpClientModule提供HTTP服务，RouterModule提供路由功能，避免重复创建实例。

@NgModule({
  declarations: [AppComponent, UserComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule {}

答：核心差异如下：

// 响应式表单示例
this.form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]]
});
get email() { return this.form.get('email'); }
get password() { return this.form.get('password'); }

答：服务的销毁取决于其注入位置：

• 根服务（providedIn: 'root'）：随应用销毁而销毁
• 组件级服务（providers: [Service]）：随组件销毁而销毁

内存泄漏常见原因：

1. 未订阅的Observable（如HTTP请求）
2. 未取消的定时器
3. 未解除的事件监听器
4. 未关闭的WebSocket连接

解决方案：使用takeUntil配合ngOnDestroy自动取消订阅。

export class UserComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject();
  ngOnInit() {
    this.userService.getUsers()
      .pipe(takeUntil(this.destroy$))
      .subscribe(users => this.users = users);
  }
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

答：通过FormControl的valueChanges结合RxJS操作符实现：

ngOnInit() {
  this.searchControl.valueChanges
    .pipe(
      debounceTime(300), // 防抖300ms
      distinctUntilChanged(), // 去重
      switchMap(query => this.api.search(query)) // 取消前序请求
    )
    .subscribe(results => this.results = results);
}

优势：避免频繁请求，提升用户体验与后端性能。

答：四步实现：

1. 定义State：export interface UserState { users: User[]; loading: boolean; }
2. 定义Actions：

   export const loadUsers = createAction('[User] Load Users');
   export const loadUsersSuccess = createAction('[User] Load Users Success', props<{ users: User[] }>());
   export const loadUsersFailure = createAction('[User] Load Users Failure', props<{ error: any }>());

3. 定义Reducer：

   export const userReducer = createReducer(
     initialState,
     on(loadUsers, state => ({ ...state, loading: true })),
     on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),
     on(loadUsersFailure, state => ({ ...state, loading: false }))
   );

4. 定义Effects：

   @Effect()
   loadUsers$ = this.actions$.pipe(
     ofType(loadUsers),
     switchMap(() => this.userService.getUsers()
       .pipe(
         map(users => loadUsersSuccess({ users })),
         catchError(error => of(loadUsersFailure({ error })))
       ))
   );

答：使用以下工具组合分析：

1. Chrome DevTools → Performance：录制运行时性能，分析JS执行、渲染耗时
2. Angular DevTools：查看组件树、状态、变更检测次数
3. Webpack Bundle Analyzer：分析打包体积，识别大依赖
4. Lighthouse：自动化性能评分（FCP、LCP、TTI等）

典型优化案例：某电商网站通过OnPush策略+懒加载，首屏加载时间从2.8s降至1.1s。

答：三步配置：

1. 安装依赖：ng add @nguniversal/express-engine
2. 生成服务端入口：server.ts（Express服务器）
3. 构建与启动：npm run build:ssr && npm run serve:ssr

关键代码：

// server.ts
app.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
  });
});

SEO优化建议：使用title与meta标签动态设置；避免JavaScript依赖的动态内容。

答：使用async或fakeAsync处理异步操作：

it('should load users on init', fakeAsync(() => {
  fixture = TestBed.createComponent(UserComponent);
  component = fixture.componentInstance;
  // 模拟服务返回数据
  const userService = TestBed.inject(UserService);
  spyOn(userService, 'getUsers').and.returnValue(of([{ id: 1, name: 'John' }]));
  fixture.detectChanges(); // 触发ngOnInit
  tick(); // 消耗所有异步任务
  expect(component.users.length).toBe(1);
  expect(component.users[0].name).toBe('John');
}));

关键点：fakeAsync+tick()模拟时间流逝；spyOn模拟服务依赖。