угловые 2 передаваемых параметра в маршруте

У меня есть компонент, из которого мне нужно передать данные другому компоненту при нажатии кнопки, поэтому я использовал свойство [routerLink] в якоре, как это

<a [routerLink]="['/employeedetail' , name, address, 
detail3 , detail4, detail5, detail6 , detail7, detail8 , 
detail9, detail10></a>

определил соответствующий маршрут в app.route.ts

    {
    path: 'employeedetail/:name/:address/:detail3 /:detail4
    /:detail5 /:detail6/:detail7 /:detail8 /:detail9 /:detail10 ',
    component : employeedetailComponent
    }

В идеальном мире это должно работать, но это не так, поскольку выдается ошибка, говорящая

zone.js:355Отклонение необработанного обещания: неподдерживаемое количество аргументов для чистых функций: 11 ; Зона: ; Задание: Promise.then ; Значение: Ошибка: Неподдерживаемое количество аргументов для чистых функций: 11(…) Ошибка: Неподдерживаемое количество аргументов для чистых функций: 11

Я исследовал это и обнаружил, что маршрутизатор angular2 дает сбой, когда во встроенном шаблоне есть 10 элементов, я попробовал, удалив последний параметр в URL (detail10) и без ошибок.

Вопрос заключается в том, как передать это большое количество параметров в URL-адресе с помощью [routerlink] или мне следует использовать другой подход для передачи данных из одного компонента в другой компонент?


person Dmehro    schedule 23.11.2016    source источник


Ответы (2)


Вы можете использовать queryParams для передачи параметров в URL.

<a [routerLink]="['/employeedetail' , name, address]" [queryParams]="{detail3: detail3, detail4: detail4}">Somewhere</a>

Использование параметров запроса лучше для необязательных параметров, это делает ваш URL-адрес более читаемым.

person Alex Kojin    schedule 23.11.2016
comment
мое требование не для необязательных параметров, это своего рода обязательные параметры для правильной работы другой страницы - person Dmehro; 23.11.2016

Добавьте в компонент метод, который подготавливает маршрут, и передайте результат, а не встраивайте его в шаблон.

  class MyComponent {
    get employeeDetailLink() {
      return ['/employeedetail' , name, address, 
detail3 , detail4, detail5, detail6 , detail7, detail8 , 
detail9, detail10];
    }
  }

и использовать его как

<a [routerLink]="employeeDetailLink"

Это ограничение было снято недавно (не знаю, выпущено ли оно уже) https://github.com/angular/angular/pull/12710

См. также https://github.com/angular/angular/issues/12233.

person Günter Zöchbauer    schedule 23.11.2016
comment
как мне получить параметры обратно на другую страницу, я не уверен, могу ли я использовать this.router.snapshot.params["param1"]; для получения переданных значений параметров - person Dmehro; 23.11.2016