web-dev-qa-db-ja.com

URLにパラメーターを追加せずにAngular 7に移動します

Angular 7の間にデータを投稿して2つのルート間をナビゲートしたいのですが、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-いくつかのデータを含む経路

/ formルート-ユーザーは手動で入力する空のフィールドを持つフォームを持っています

/ optionsページには、ユーザーが選択したものが/ formにナビゲートされ、フィールドが自動的に入力されるときに、いくつかのプリセット構成があります

別のページに戻って/ formに戻ると、空のフォームが表示されます。/optionsから/ formへのリンクのみがこれらのフィールドに入力する必要があります。

javascriptangularpostroutingangular7
8
Michał Fejer

サービスを作成して、両方のコンポーネント（移動元のコンポーネントと移動先のコンポーネント）間で共有できます。

サービス内で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;
    ...
}
4
Akash Srivastav

いくつかの方法があります。

試行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();
2
Farhat Zaman