Angular中从Page2选值后返回原有Page1页面的实现问题

方法1：共享服务（RxJS BehaviorSubject） #

这是跨页面状态共享的可靠方案，能确保传递数据后回到原有Page1实例。

1. 创建共享数据服务

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

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  private selectedValueSubject = new BehaviorSubject<number | null>(null);
  selectedValue$ = this.selectedValueSubject.asObservable();

  setSelectedValue(value: number): void {
    this.selectedValueSubject.next(value);
  }
}

2. 在Page1中订阅数据并跳转至Page2

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-page1',
  template: `
    <input type="text" placeholder="输入字段1">
    <input type="text" placeholder="输入字段2">
    <a routerLink="/page2">跳转至Page2选择值</a>
    <p>选中的值：{{ selectedValue }}</p>
  `
})
export class Page1Component implements OnInit {
  selectedValue: number | null = null;

  constructor(
    private router: Router,
    private sharedDataService: SharedDataService
  ) {}

  ngOnInit(): void {
    this.sharedDataService.selectedValue$.subscribe(value => {
      if (value !== null) {
        this.selectedValue = value;
      }
    });
  }
}

3. 在Page2中设置选中值并回退至Page1

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-page2',
  template: `
    <div *ngFor="let num of [1,2,3,4,5]">
      <button (click)="selectValue(num)">{{ num }}</button>
    </div>
  `
})
export class Page2Component {
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private sharedDataService: SharedDataService
  ) {}

  selectValue(value: number): void {
    this.sharedDataService.setSelectedValue(value);
    // 相对路径回退到原有Page1实例
    this.router.navigate(['../'], { relativeTo: this.route });
  }
}

方法2：路由参数结合相对路径回退 #

适合简单数值传递场景，无需额外服务，通过查询参数传递值并回退到原有页面。

1. Page2中点击按钮传递参数并回退

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-page2',
  template: `
    <div *ngFor="let num of [1,2,3,4,5]">
      <button (click)="selectValue(num)">{{ num }}</button>
    </div>
  `
})
export class Page2Component {
  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  selectValue(value: number): void {
    this.router.navigate(['../'], {
      relativeTo: this.route,
      queryParams: { selectedValue: value }
    });
  }
}

2. Page1中读取查询参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-page1',
  template: `
    <input type="text" placeholder="输入字段1">
    <input type="text" placeholder="输入字段2">
    <a routerLink="/page2">跳转至Page2选择值</a>
    <p>选中的值：{{ selectedValue }}</p>
  `
})
export class Page1Component implements OnInit {
  selectedValue: number | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      if (params['selectedValue']) {
        this.selectedValue = +params['selectedValue'];
      }
    });
  }
}

关键注意点 #

• 禁止使用this.router.navigate(['/page1'], { queryParams: ... })，该方式会重新初始化Page1组件，导致原有输入字段数据丢失。
• 共享服务方案适合复杂场景（如传递对象、多组件共享状态），路由参数方案适合简单数值传递。

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