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

Posted 2023-02-22

【中文标题】在 Angular 7 中导航而不向 URL 添加参数

【英文标题】：Navigate in Angular 7 without adding parameter to URL

【发布时间】：2019-04-30 05:46:39

【问题描述】：

我想在 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

编辑：

我的情况：

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

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

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

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

【问题讨论】：

除了共享服务，另一个选择是通过 NavigationExtras 的 state 字段***.com/a/58915055/2583579

【参考方案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;
    ...

【讨论】：

这是一个很好的解决方案。但我想将这些数据设置为仅从一个 url 导航到第二个。在这个解决方案中，当我设置 sharedService 数据一次并稍后从不同的路径导航到第二条路线时，这些值将已经设置。没有什么可以清除它。我可以在开始第二条路线时做到这一点 - 但我不知道它是否可以。通常我有这样的情况：在/form路由上我有一些带有空字段的表单。用户应该填写它们。但是可以选择从一个页面导航并用一些数据预填充这个表单。所以从/create url我想发布一些数据到 /form 并部分填充。

@MichałFejer 您可以在任何组件中使用 ngOnDestroy() 方法随时清除这些值，或者如您所说，您可以在访问它们后清除它们。

在页面重新加载时丢失数据。

这对我不起作用...新路线上的数据为空

【参考方案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();

【讨论】：

永远不要在服务中使用EventEmitter。这些只能与组件内的@Output() 结合使用。

第二个例子中的服务是什么？你有完整的例子吗？

【参考方案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;
    )
...

【参考方案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 中看不到这些值