Angular 12 -导航到新的路径，保留旧路径的url

Angular 12是一种流行的前端开发框架，用于构建跨平台的Web应用程序。在Angular 12中，导航到新的路径并保留旧路径的URL可以通过以下方式实现：

1. 使用Angular的内置路由器（Angular Router）：Angular提供了一个强大的路由器模块，可用于管理应用程序的导航和URL。要导航到新的路径并保留旧路径的URL，您可以使用router.navigate()方法，并设置preserveQueryParams和preserveFragment选项为true。

例如，如果要从当前路径/old导航到新的路径/new，并保留旧路径的查询参数和片段，可以执行以下操作：

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

constructor(private router: Router) { }

navigateToNewPathWithPreservation() {
  this.router.navigate(['/new'], { 
    preserveQueryParams: true,
    preserveFragment: true
  });
}

在上述代码中，preserveQueryParams选项将保留旧路径的查询参数，preserveFragment选项将保留旧路径的片段。

1. 使用Angular的Location服务：Angular的Location服务提供了与浏览器URL相关的功能。要导航到新的路径并保留旧路径的URL，可以使用Location的go()方法，并传递{ replaceUrl: false }选项。

例如，要从当前路径/old导航到新的路径/new，并保留旧路径的URL，可以执行以下操作：

import { Location } from '@angular/common';

constructor(private location: Location) { }

navigateToNewPathWithPreservation() {
  this.location.go('/new', '', { replaceUrl: false });
}

在上述代码中，replaceUrl选项将指示Location服务在导航时不要替换浏览器的URL。

关于Angular 12的更多信息和使用方法，您可以参考腾讯云的产品文档：

• Angular 12 官方文档
• 腾讯云前端开发服务
• 腾讯云云服务器
• 腾讯云云原生应用引擎
• 腾讯云弹性MapReduce
• 腾讯云数据库
• 腾讯云人工智能
• 腾讯云物联网
• 腾讯云移动开发平台
• 腾讯云对象存储
• 腾讯云区块链
• 腾讯云元宇宙
• 腾讯云网络安全