Angular待办应用编辑弹窗获取任务ID：路由方式无效求替代方案

如果通过路由快照获取ID无效，通常是因为组件复用导致快照未更新，或是编辑弹窗并非由路由参数触发打开。以下是几种可靠的替代实现方式：

1. 订阅路由 paramMap 而非使用快照 #

路由快照仅在组件初始化时获取一次参数，若组件复用（如同一路由切换不同参数），快照不会更新。改用订阅方式能实时获取最新参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    this.id = params.get('id');
    // 在此触发编辑数据加载或后续逻辑，确保ID始终为最新值
  });
}

2. 弹窗打开时直接传递任务ID（非路由触发场景首选） #

若编辑弹窗是通过列表项点击打开（比如用Angular Material Dialog），直接在弹窗初始化时传入ID是最直接的方式，无需依赖路由：

父组件打开弹窗时传参： #

import { MatDialog } from '@angular/material/dialog';
import { EditTodoDialogComponent } from './edit-todo-dialog.component';

// 点击编辑按钮的触发方法
openEditDialog(todoId: number): void {
  const dialogRef = this.dialog.open(EditTodoDialogComponent, {
    data: { id: todoId } // 直接传递任务ID
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      // 弹窗关闭后刷新列表等后续逻辑
    }
  });
}

弹窗组件接收参数： #

import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

constructor(@Inject(MAT_DIALOG_DATA) public data: { id: number }) {
  this.id = data.id; // 直接获取传入的ID
}

// 编辑提交逻辑
submitEdit(): void {
  this.todoService.editTasks(this.id, this.formData.value).subscribe(res => {
    console.log('更新成功');
  });
}

3. 使用共享服务传递状态 #

如果项目中需要跨组件共享任务ID，可通过RxJS BehaviorSubject实现状态共享：

共享服务： #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TodoSharedService {
  private currentTodoId$ = new BehaviorSubject<number | null>(null);

  setCurrentTodoId(id: number): void {
    this.currentTodoId$.next(id);
  }

  getCurrentTodoId() {
    return this.currentTodoId$.asObservable();
  }
}

父组件设置ID： #

constructor(private todoSharedService: TodoSharedService) {}

openEditDialog(todoId: number): void {
  this.todoSharedService.setCurrentTodoId(todoId);
  // 打开弹窗逻辑
}

弹窗组件获取ID： #

constructor(private todoSharedService: TodoSharedService) {}

ngOnInit(): void {
  this.todoSharedService.getCurrentTodoId().subscribe(id => {
    if (id) {
      this.id = id;
    }
  });
}

内容的提问来源于stack exchange，提问作者user16953799