如何确定history.back()是否仍在同一个Angular应用程序中

使用history.back()了解角度导航

使用 Angular 和 TypeScript 进行动态导航控制的前端解决方案

// Import Angular core and router modules
import { Component } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private navigationStack: string[] = []; // Stack to track routes
  constructor(private router: Router) {
    // Listen for router events
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: any) => {
        this.navigationStack.push(event.urlAfterRedirects);
      });
  }
  handleBackNavigation(): boolean {
    if (this.navigationStack.length > 1) {
      this.navigationStack.pop(); // Remove current route
      const previousUrl = this.navigationStack[this.navigationStack.length - 1];
      this.router.navigateByUrl(previousUrl);
      return true;
    }
    return false; // No previous route in stack
  }
}

探索路由管理的服务器端协助

使用 Node.js 和 Express 进行基于会话的路线跟踪的后端解决方案

// Import necessary modules
const express = require('express');
const session = require('express-session');
const app = express();
// Setup session middleware
app.use(session({
  secret: 'your_secret_key',
  resave: false,
  saveUninitialized: true
}));
// Middleware to track navigation stack
app.use((req, res, next) => {
  if (!req.session.navigationStack) {
    req.session.navigationStack = [];
  }
  if (req.url !== req.session.navigationStack[req.session.navigationStack.length - 1]) {
    req.session.navigationStack.push(req.url);
  }
  next();
});
// Endpoint to handle back navigation
app.get('/navigate-back', (req, res) => {
  if (req.session.navigationStack.length > 1) {
    req.session.navigationStack.pop();
    const previousUrl = req.session.navigationStack[req.session.navigationStack.length - 1];
    res.redirect(previousUrl);
  } else {
    res.status(404).send('No previous URL found');
  }
});
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

使用单元测试测试路线导航逻辑

使用 Jasmine 和 Karma 对 Angular 应用程序进行单元测试

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { Router } from '@angular/router';
describe('AppComponent Navigation', () => {
  let router: Router;
  let component: AppComponent;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent]
    });
    const fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    router = TestBed.inject(Router);
  });
  it('should handle back navigation correctly', () => {
    component['navigationStack'] = ['/home', '/about'];
    spyOn(router, 'navigateByUrl');
    const result = component.handleBackNavigation();
    expect(result).toBe(true);
    expect(router.navigateByUrl).toHaveBeenCalledWith('/home');
  });
});

1. 有关 Angular Router 和导航的见解和示例受到 Angular 文档的启发。请访问此处的官方页面： 角度路由器指南 。
2. 有关 RxJS 运算符及其与 Angular 集成的详细信息参考了 RxJS 官方文档。在这里探索更多： RxJS 运算符文档 。
3. Express.js 最佳实践为后端导航处理和会话管理提供了信息。查看此处的文档： Express.js 指南 。
4. 有关使用 Angular Guards 增强导航的信息来自 Angular Guards 综合指南。在这里了解更多： 角度防护概述 。