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

如何取消网址中的数据：

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

编辑：

我的情况：

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

/ form路线上-用户有一些带有空字段的表单可以手动填写

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

当他们返回到另一页并再次返回到/ form时-应该看到空白表格。仅从/ options到/ form的链接应填写这些字段。

Answer 1

您可以创建一个服务，并在两个组件（您要从中移动的组件，以及您要向其移动的组件）之间共享服务。

在服务中并在router.navigate[]之前，声明要传递给URL的所有参数，然后为服务中的参数设置值。

您可以使用该服务从其他组件访问这些参数。

示例：

SharedService

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

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

Component1

import { SharedService } from 'location';
...
constructor(private _sharedService: SharedService) { }
...
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;
    ...
}

Answer 2

执行此操作的方法很少。

尝试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 3

通过“状态”键传递值，您要从中将其导航到下一个组件：

 <div class="h2 mt-16">Application Management of {{deviceNameList}}</div>

我们在url中看不到这些值

Answer 4

另一种解决方案是通过state的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;
    })
...
}

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

4 个答案: