Невозможно проанализировать дополнительные параметры маршрутизации в Angular

В настоящее время я следую официальному руководству по маршрутизации Angular.

В этом руководстве, когда мы передаем необязательные параметры из /hero-detail.component.ts в /hero-list.component.ts в виде кнопки «Назад», я не могу прочитать эти параметры в хуке ngOnInit для списка героев. .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' }]);
}

ngOnInit() {
    this.heroes$ = this.route.paramMap
      .switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes();
      });

Я даже загрузил их официальный пример и попытался запустить его в своем локальном браузере. Я получаю значение 0 по умолчанию для идентификатора.

Любая идея, почему это так?


angular angular-routing angular2-routing
person Nuclear - Core    schedule 20.01.2018    source источник
comment
Где ваш код, который подписывается на наблюдаемое heroes$? Или вызов канала async, который вызывает это? Кажется, вы упускаете что-то, что действительно заставляет эту работу работать. Вы следовали руководству до конца?   -  person R. Richards    schedule 20.01.2018
comment
можешь попробовать с this.route.snapshot.paramMap.get('id');   -  person Niladri    schedule 20.01.2018
comment
@R.Richards Да, я следовал полному руководству. Мало того, что я загрузил их образец и запустил его без изменений, и он не работает.   -  person Nuclear - Core    schedule 20.01.2018
comment
К вашему сведению, использование моментального снимка работает нормально.   -  person Nuclear - Core    schedule 21.01.2018

Ответы (2)


arrow_upward
0
arrow_downward

Причина, по которой работает код из официального руководства по Angular, заключается в перенаправлении, объявленном в файле 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 приведено в качестве примера, это может быть любой идентификатор супергероя) удаляется из URL, так как не распознается параметр Route.redirectTo - в отличие от :id, который явно передается в случае перенаправления на реквизиты супергероя.

Решение состоит в том, чтобы избежать перенаправления, заменив путь для навигации:

    this.router.navigate(['/superheroes', { id: heroId, foo: 'foo' }]);
person pchemeque    schedule 20.08.2018
comment
Что, если у нас наконец не будет необязательных параметров в середине URL-адреса? - person Ajarudin Gunga; 25.09.2019

arrow_upward
0
arrow_downward

ЕСЛИ у вас есть дефисы (-) в параметрах запроса. Получите значения, используя приведенный ниже синтаксис.

Пример URL: http://example.com/?query-type=test

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