Angular中解决创建订单返回后New Order按钮不显示的问题

你遇到的核心问题是：Angular组件在路由跳转后会重新实例化，standing-orders-details.component.ts中的isNewOrderVisited变量会被重置为初始值false，所以从new-order页面返回时按钮无法显示。

下面提供几种可行的解决思路，按需选择：

方案1：通过路由参数传递状态 #

在new-order.component.ts的newOrderRequest方法中，跳转时携带查询参数：

// new-order.component.ts
newOrderRequest(): void {
  // 你的创建订单逻辑...
  // 创建成功后跳转，携带状态参数
  this.router.navigate(['/orders/standing-orders-details'], {
    queryParams: { visitedNewOrder: 'true' }
  });
}

然后在standing-orders-details.component.ts的ngOnInit中读取并设置状态：

// standing-orders-details.component.ts
import { ActivatedRoute } from '@angular/router';

constructor(
  private router: Router,
  private route: ActivatedRoute // 注入ActivatedRoute
) {}

ngOnInit(): void {
  // 读取路由参数
  this.route.queryParams.subscribe(params => {
    this.isNewOrderVisited = params['visitedNewOrder'] === 'true';
  });
}

方案2：使用共享服务保存全局状态 #

创建一个全局共享服务来维护状态（适合同会话内多组件共享状态的场景）：

// order-state.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class OrderStateService {
  private _isNewOrderVisited = new BehaviorSubject<boolean>(false);
  isNewOrderVisited$ = this._isNewOrderVisited.asObservable();

  setNewOrderVisited(status: boolean): void {
    this._isNewOrderVisited.next(status);
  }
}

修改standing-orders-details.component.ts，通过服务订阅状态：

// standing-orders-details.component.ts
import { OrderStateService } from './order-state.service';

constructor(
  private router: Router,
  private orderStateService: OrderStateService // 注入服务
) {}

ngOnInit(): void {
  // 订阅状态变化
  this.orderStateService.isNewOrderVisited$.subscribe(status => {
    this.isNewOrderVisited = status;
  });
}

goToNewOrder(): void {
  // 通过服务设置状态
  this.orderStateService.setNewOrderVisited(true);
  this.router.navigate(['/orders/newOrder']);
}

new-order.component.ts中创建成功后直接跳转即可，无需额外处理：

// new-order.component.ts
newOrderRequest(): void {
  // 创建订单逻辑...
  this.router.navigate(['/orders/standing-orders-details']);
}

方案3：使用本地存储持久化状态 #

如果需要页面刷新后状态依然保留，可以用localStorage或sessionStorage：

// standing-orders-details.component.ts
goToNewOrder(): void {
  localStorage.setItem('visitedNewOrder', 'true');
  this.router.navigate(['/orders/newOrder']);
}

ngOnInit(): void {
  // 读取本地存储的状态
  this.isNewOrderVisited = localStorage.getItem('visitedNewOrder') === 'true';
}

// 可选：离开页面时清除状态（根据业务需求决定）
ngOnDestroy(): void {
  localStorage.removeItem('visitedNewOrder');
}

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