如何将参数从 urlA 传递到 urlB 而不在 url 中显示它们答案

【问题标题】：How pass parameters from urlA to urlB without show them in the url如何将参数从 urlA 传递到 urlB 而不在 url 中显示它们
【发布时间】：2020-08-13 16:29:40
【问题描述】：

我需要从 URLA 或 urlB 传递参数，但必须显示 urlB（所以我不能使用 skiplocation=true）。

在我的 ts 中（在 URLA 中）：

 this.router.navigate([URLB], {
                queryParams:
                {
                    name: "erika"

                }
            });

当我接受参数时：

 this.activatedRoute.queryParams.subscribe(params => {
      this.name = params['name'];

    });

问题是它以这种方式向我显示 url URLB?name=erika 而我不想这样做，但我希望它向我显示 URLB 并且我可以接受参数。谁能帮帮我？

【问题讨论】：

如果您以编程方式发送查询参数，为什么您不使用服务/输入而不是使用查询参数。如果您使用服务，您可以将该数据存储在服务中并从任何组件中获取它。或者您可以使用事件发射器将数据发送到特定组件。
Service 是这样做的最佳选择。你也可以使用localstorage。

标签： angular router angular-router angular-activatedroute

【解决方案1】：

您可以使用@Input 将数据从一个组件传递到另一个组件，而无需看到这些数据反映在 url 中

【讨论】：

【解决方案2】：

使用这个：

let data = {name: 'erika'}
this.router.navigateByUrl([URLB], data);

还有这个：

this.activatedRoute.data
  .subscribe(
    (data: Data) => {
      this.name = data['name'];
    }
  );

【讨论】：

我正在尝试使用您的解决方案，当我这样做时 this.router.navigateByUrl('/urlB',data)。它给我这个错误的编译器“数据与'NavigationExtras'类型没有共同的属性”
一个很好的解释，在：netbasal.com/…

【解决方案3】：

您有多种方法可以实现这一目标。

1) 通过@Input和@Output共享数据

2) 通过服务共享数据： https://angular.io/guide/component-interaction#parent-listens-for-child-event

3) 通过国家图书馆共享数据。我推荐你Ngxs

【讨论】：