Question

目前我正在关注官方Angular routing guide

在本指南中，当我们以后退按钮的形式将/hero-detail.component.ts中的可选参数传递给/hero-list.component.ts时，我无法在{{1}中读取这些参数用于hero-list.component.ts的hook。

ngOnInit

我甚至已经下载了他们的官方示例，并尝试在我的本地浏览器中运行它，我获得了id的默认值0。

知道为什么会这样吗？

Answer 1

官方Angular guide doen工作的代码之所以在文件 heroes-routing.module.ts

中声明了重定向

const heroesRoutes: Routes = [
  { path: 'heroes', redirectTo: '/superheroes' },
  { path: 'hero/:id', redirectTo: '/superhero/:id' },
  { path: 'superheroes',  component: HeroListComponent },
  { path: 'superhero/:id', component: HeroDetailComponent }
];

在 hero-detail.component.ts

中的函数中构造导航路径时

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

}

构造的路径等于：

http://localhost:4200/heroes;id=12;foo=foo

它显然会设置'/ heroes'（而不是'/ superheroes'），以便进行重定向。同时，剩余的“; id = 12; foo = foo” （作为示例提供了值12，它可以是超级英雄的任何ID）由于无法被URL识别而从URL中删除 Route.redirectTo 作为参数-与：id 相反，：id 在重定向到超级英雄的详细信息时会被显式传输。

解决方案是通过替换导航路径来避免重定向：

    this.router.navigate(['/superheroes', { id: heroId, foo: 'foo' }]);

Answer 2

如果查询参数中带有连字符（-）。请使用检索值下面的语法。

示例网址：http://example.com/?query-type=test

 this.params = _router.routerState.snapshot.root.queryParams;
 var queryparams = this.params['query-type']

无法解析Angular中的可选路由参数

2 个答案: