Question

在Angular 2中，有没有办法导航和传递URL中未显示的数据？

我想创建一个接收复杂对象的组件，但不希望它显示在URL中。

谢谢！

Answer 1

如果您使用navigate方法，请添加skipLocationChange，如下所示：

this.router.navigate(['/your-path'], { skipLocationChange: true });

如果您使用的是routerLink，请将其用作以下属性：

<a [routerLink]="['/your-path']" skipLocationChange></a>

请注意，如果您使用skipLocationChange，导航到新路线后浏览器中的路线将不会更新，因此如果用户在浏览器中回击，他将被发送到第一条路径之前的路径。我还没有找到解决方案。

Answer 2

仅支持使用Angle 7.2及更高版本的新版本的angular的新读者，您可以使用state动态传递数据对象而不显示在url中。

this.router.navigate(['/some-route'], {state: {data: {...}}});

然后您可以读取状态：

ngOnInit() {
    this.state = this.activatedRoute.paramMap
        .pipe(map(() => window.history.state));}

Answer 3

是的，可以做到.. 以下是此link的示例。

const appRoutes: Routes = [
  { path: 'hero/:id', component: HeroDetailComponent },
  { path: 'crisis-center', component: CrisisCenterComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: {
      title: 'Heroes List'
    }
  },
  { path: '', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

在这个例子中，我们将一个对象传递给＆＃39;英雄＆＃39;不会在url中显示的路径。希望这会有所帮助。

Answer 4

您可以使用以下功能传递参数：

this.router.navigate(['/somePage'], {queryParams: {'name': 'Emon'}, skipLocationChange: true});

这对我有用！

Angular 2 - 导航而不显示url上的数据

4 个答案: