web-dev-qa-db-fra.com

Naviguez dans Angular 7 sans ajouter de paramètre à l'URL

Je veux naviguer entre deux routes dans Angular 7 avec publication de données entre elles. Mais je ne veux pas montrer ces paramètres dans l'URL. Comment le faire de manière appropriée?

en ce moment, je me bats avec quelque chose comme ça:

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

et ça change mon URL pour

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

comment faire pour annuler ces données de l'url:

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

Éditer:

Mon cas:

  1. / form - route avec une forme
  2. / options - route avec quelques données

on/form route - les utilisateurs ont un formulaire avec des champs vides à remplir manuellement

mais sur la page/options, il y a une configuration prédéfinie, lorsque l'utilisateur en choisit une, on navigue vers/formulaire et les champs sont remplis automatiquement

quand ils reviennent à une autre page et reviennent à/form - devrait voir un formulaire vide. Seul le lien depuis/options vers/formulaire doit remplir ces champs.

javascriptangularpostroutingangular7
8
Michał Fejer

Vous pouvez créer un service et le partager entre les deux composants (celui à partir duquel vous vous déplacez et celui vers lequel vous vous déplacez).

Déclarez tous les paramètres que vous souhaitez transmettre à l'URL, dans le service, et avant la router.navigate([]), définissez les valeurs des paramètres dans le service.

Vous pouvez accéder à ces paramètres à partir de l'autre composant avec ce service.

Exemple:

SharedService

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

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

Component1

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']);
...

Component2

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;
    ...
}
4
Akash Srivastav

Il y a peu de façons de le faire.

Essayez 1:

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

Essayez 2:

Nous pouvons utiliser ce travail à la place en utilisant EventEmitter et BehaviorSubject avec un service partagé

Dans la composante 1:

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

En service :

emmiter : EventEmitter = new EventEmitter();

Dans le composant 2: constructeur intérieur

this.service.emmiter.subscribe();
2
Farhat Zaman