Javascript 在Angular 7中导航，而不向URL添加参数

我想在Angular 7中的两条路线之间导航，并在它们之间发布数据。但我不知道；我不想在URL中显示这些参数。如何以适当的方式做这件事

此时此刻，我正在绞尽脑汁做这样的事情：

navigate（['/mynewroute'，{data1:'test'，test2:2323，test:'aaaaaaaa'}]）；

它将我的url更改为

http://localhost:4200/my-新路线；数据1=试验；test2=2323；测试=AAAAA

如何从url中取消这些数据：

http://localhost:4200/my-新路线

编辑：

我的情况是：

/表单-带有某种表单的路由

/选项-包含一些数据的路由

on/form route-用户需要手动填写一些带有空字段的表单

但在/options页面上有一些预设配置，当用户选择一个选项时，会导航到/form并自动填充字段

---

当他们移回另一个页面并再次移回/form时，应该会看到空表单。只有从/options到/form的链接才能填充这些字段

几乎没有办法做到这一点

尝试1:

this.router.navigate(['/some-url'], { queryParams:  filter, skipLocationChange: true});

尝试2:

this.router.navigate(['/some-url'], { queryParams:  filter, skipLocationChange: true});

我们可以通过将EventEmitter和BehaviorSubject与共享服务一起使用来替代这种解决方法

在组成部分1中：

this.router.navigate(['url']).then(()=>
    this.service.emmiter.emit(data)
)

在职：

emmiter : EventEmitter = new EventEmitter();

在组件2中：内部构造函数

this.service.emmiter.subscribe();

---

您可以创建一个服务，并在两个组件（您要移动的组件和您要移动到的组件）之间共享它

在服务中，在

路由器之前声明要传递到URL的所有参数。导航（[]）

，设置服务中参数的值

您可以使用该服务从其他组件访问这些参数

例如：

共享服务

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

@Injectable({
    providedIn: 'root'
})
export class SharedService {
    data1;
    test2;
    test;
}

组件1

import { SharedService } from 'location';
import { Router } from '@angular/router';
...
constructor(private _sharedService: SharedService,
            private _router: Router) { }
...
this._sharedService.data1 = 'test'
this._sharedService.test2 = 2323;
this._sharedService.test = 'AAAAAAAA';
this._router.navigate(['/my-new-route']);
...

组件2

import { SharedService } from 'location';
...
private test2;
private test;
private data1;
constructor(private _sharedService: SharedService){ }
ngOnInit() {
    this.data1 = this._sharedService.data1;
    this.test2 = this._sharedService.test2;
    this.test = this._sharedService.test;
    ...
}

---

另一种将信息从一条路由传递到另一条路由而不涉及查询参数的解决方案是通过字段（从Angular 7.2+开始）

类似这样的东西

// Publish
<a
  [routerLink]="['/studies', study.id]"
  [state]="{ highlight: true }">
  {{study.title}}
</a>

通过要导航到下一个组件的“状态”键传递值：

//From where we Navigate
import {ActivatedRoute, NavigationExtras, Router} from "@angular/router";
export class MainPageComponent {
  constructor(public router:Router) {}
   navWithExtraValue () {
          const navigationExtras: NavigationExtras = {
            state: {
                editMode: true
            },
        };
      }
  }


 //In constructor where we Navigated
 constructor(public router:Router,
    public route:ActivatedRoute){
      this.route.queryParams.subscribe(data=> {
        if (this.router.getCurrentNavigation().extras.state) {
            this.editMode = this.router.getCurrentNavigation().extras.state.editMode;
        }
    });

---

我们在url中看不到这些值，请不要在服务中使用

EventEmitter

。这些服务仅与组件内部的

@Output（）

结合使用。第二个示例中的服务是什么？你有完整的例子吗？这是很好的解决方案。但我想设置这些数据只从一个url导航到第二个url。在这个解决方案中，当我设置sharedService数据一次，然后从不同的路径导航到secound路由时，这些值已经设置好了。没有什么能清除它。我可以在第二条路线开始的时候做，但我不知道是否可以。通常情况下，我有这样的例子：在/form路径上，我有一些带有空字段的表单。用户应该填充它们。但是可以选择从一个页面导航并用一些数据预先填充此表单。因此，从/create url，我想将一些数据发布到/form并部分填充。@MichałFejer您可以使用ngondestry（）方法在任何组件中随时清除这些值，或者如您所说，可以在访问这些值后清除它们。在页面重新加载时丢失数据。除了共享服务外，另一个选项是通过NavigationExtras的状态字段

//From where we Navigate
import {ActivatedRoute, NavigationExtras, Router} from "@angular/router";
export class MainPageComponent {
  constructor(public router:Router) {}
   navWithExtraValue () {
          const navigationExtras: NavigationExtras = {
            state: {
                editMode: true
            },
        };
      }
  }


 //In constructor where we Navigated
 constructor(public router:Router,
    public route:ActivatedRoute){
      this.route.queryParams.subscribe(data=> {
        if (this.router.getCurrentNavigation().extras.state) {
            this.editMode = this.router.getCurrentNavigation().extras.state.editMode;
        }
    });