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

Question

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

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

谢谢！

Answer 1

只是为了支持使用新版本 Angular 的新读者，在 Angular 7.2 及更高版本中，您可以使用状态动态传递数据对象，而无需在 url 中显示。

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

那么你可以阅读如下状态：

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

Answer 2

是的，可以做到。以下是此链接的示例。

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 }
];

在此示例中，我们将一个对象传递到“英雄”路径，该路径不会显示在 url 中。希望这会有所帮助。