在 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

编辑：

我的情况：

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

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

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

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

Answer 1

有几种方法可以做到。

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

Answer 2

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

在服务中声明要传递给 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 3

另一种将信息从一个路由传递到另一个路由而不触及查询参数的解决方案是通过 state field of NavigationExtras（从 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

通过要导航到下一个组件的“state”键传递值：

//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

中看不到这些值

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

Navigate in Angular 7 without adding parameter to URL

javascript

post

routing

angular

angular7