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

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/my-new-route

编辑：

我的情况：

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

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

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

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

Answer 1

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

在服务中和router.navigate([]) 之前声明要传递给 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;
    ...
}

Answer 2

有几种方法可以做到这一点。

试一试：

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();

Answer 3

另一种在不触及查询参数的情况下将信息从一个路由传递到另一个路由的解决方案是通过NavigationExtras 的state 字段（从Angular 7.2+ 开始）

类似的东西

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

// Subscribe
constructor(private route: ActivatedRoute, ...) {
}

public highlight: boolean;

public ngOnInit() {
...
    this.route.paramMap
      .pipe(map(() => window.history.state))
      .subscribe(state => {
        this.highlight = state && state.highlight;
    });
...
}

// Alternative
constructor(private router: Router, ...) {
}

public highlight: boolean;

public ngOnInit() {
...
    this.router.events.pipe(
      filter(e => e instanceof NavigationStart),
      map(() => this.router.getCurrentNavigation().extras.state)
    )
    .subscribe(state => {
        this.highlight = state && state.highlight;
    })
...
}

Answer 4

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

//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 中看不到这些值