javascript - 在不向 URL 添加参数的情况下在 Angular 7 中导航

Question

我想在 Angular 7 中的两条路线之间导航，并在它们之间发布数据。但我不想在 URL 中显示这些参数。如何以正确的方式做到这一点？

此刻我正在为这样的事情而苦恼:


this.router.navigate(['/my-new-route', {data1: 'test', test2: 2323, test: 'AAAAAAA'}]);


并将我的网址更改为


http://localhost:4200/my-new-route;data1=test;test2=2323;test=AAAAAAA


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


http://localhost:4200/我的新路线


编辑:

我的情况:

1. /form - 某种形式的路由
2. /options - 带有一些数据的路由

在/form 路由上——用户有一些需要手动填写的空白字段的表单

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

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

Answer 1

您可以创建一项服务并在两个组件(您要从中移动的组件和要移动到的组件)之间共享它。

在服务中声明要传递给 URL 的所有参数，并在 router.navigate([]) 之前，为服务中的参数设置值。

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

示例:

共享服务

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;
    ...
}