Навигация в Angular 7 без добавления параметра в URL

Question

Я хочу перемещаться между двумя маршрутами в Angular 7 с размещением данных между ними.Но я не хочу показывать эти параметры в URL.Как это сделать правильно?

В данный момент я борюсь с чем-то вроде этого:

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

и это меняет мой URL на

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

как это сделать, чтобы отменить эти данные из URL:

http://localhost:4200/my-new-route

Редактировать:

Мой случай:

1. / form - маршрут с определенной формой
2. / options - маршрут с некоторыми данными

on / form route - у пользователей есть форма с пустыми полями для заполнениявручную

, но на странице / параметров есть некоторая предустановленная конфигурация, когда пользователь выбирает один из них, перемещается в / форму и поля заполняются автоматически

, когда они возвращаются на другую страницу и снова возвращаются к /форма - должна увидеть пустую форму.Заполнять эти поля должны только ссылки из / options to / form

Answer 1

Вы можете создать сервис и поделиться им между обоими компонентами (тем, из которого вы переходите, и тем, к которому вы переходите).

Объявите все параметры, которые вы хотитеперейдите к URL, в сервисе и перед router.navigate([]) установите значения для параметров в сервисе.

Вы можете получить доступ к этим параметрам из другого компонента с помощью этой службы.

Пример:

SharedService

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

Answer 2

Есть несколько способов сделать это.

Попробуйте 1:

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

Попробуйте 2:

Вместо этого мы можем использовать эту обходную работу, используя EventEmitter и BehaviorSubject с общей службой

В компоненте 1:

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

В службе:

emmiter : EventEmitter = new EventEmitter();

В компоненте 2: внутри конструктор

this.service.emmiter.subscribe();