Угловой 2 дополнительный параметр маршрута

Question

Угловой 2 дополнительный параметр маршрута

возможно ли иметь дополнительный параметр маршрута в угловом маршруте 2? Я попробовал угловой 1.синтаксис X в RouteConfig, но получил ниже ошибки:

"исходное исключение: путь" /user/: id?"содержит "?"что не допускается в конфигурации маршрута."

@RouteConfig([

{

    path: '/user/:id?',

    component: User,

    as: 'User'

}])

488 7

javascript angular

7 ответов:

Comments

Ничего не найдено.

rerezz · Accepted Answer · 2016-11-12 06:25:21

вы можете определить несколько маршрутов с параметром и без него:
@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])
и обрабатывать необязательный параметр в компоненте:
constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}
см. также связанный с github Вопрос:https://github.com/angular/angular/issues/3525

Jp_ · Accepted Answer · 2018-05-24 01:52:14

рекомендуется использовать параметр запроса, когда информация является необязательной.

параметры маршрута или параметры запроса?

нет никаких жестких правил. В общем,

предпочтите параметр маршрута, когда

значение.
значение необходимо, чтобы отличить один путь от другого маршрута.

предпочитаю параметр запроса, когда

значение является необязательным.

значение является сложным и/или многомерной.

от https://angular.io/guide/router#optional-route-parameters

вам просто нужно вынуть параметр из пути маршрута.
@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

Martin Cremer · Accepted Answer · 2018-03-15 18:07:38

{path: 'users', redirectTo: 'users/'},
{path: 'users/:userId', component: UserComponent}
таким образом, компонент не будет повторно отображаться при добавлении параметра.

ObjectiveTC · Accepted Answer · 2017-11-27 13:02:05

Angular 4-решение для решения проблемы упорядочения необязательного параметра:

СДЕЛАЙ ЭТО:
const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]
отметим, что products и products/:id маршруты называются точно так же. Угловой 4 будет правильно следовать products для маршрутов без параметра, и если параметр будет следовать products/:id.

однако путь для непараметрического маршрута products должны не есть косая черта, в противном случае угловой будет неправильно рассматривать его как параметр-путь. Поэтому в моем случае у меня была косая черта для продуктов, и она не работала.

НЕ ДЕЛАЙ ЭТОГО:
...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

Ravi Jadhav · Accepted Answer · 2017-10-28 00:16:18

С angular4 нам просто нужно организовать маршруты вместе в иерархии
const appRoutes: Routes = [
  { path: '', component: MainPageComponent },
  { path: 'car/details', component: CarDetailsComponent },
  { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
  },
  { path: 'car/details/:id', component: CadDetailsComponent },
  { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
  }
];
это работает для меня . Таким образом, маршрутизатор знает, что такое следующий маршрут на основе параметров идентификатора опции.

matewka · Accepted Answer · 2018-04-10 12:51:30

ответ ререза довольно хорош, но у него есть один серьезный недостаток. Это вызывает User компонент для повторного запуска ngOnInit метод.

это может быть проблематично, когда вы делаете некоторые тяжелые вещи там и не хотите, чтобы он был повторно запущен при переключении с непараметрического маршрута на параметрический. Хотя эти два маршрута предназначены для имитации необязательного параметра url, а не становятся 2 отдельными маршрутами.

вот что я предлагаю решить проблема:
const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];
затем вы можете переместить логику, ответственную за обработку param в UserWithParam компонент и оставить базовый логика User компонент. Что бы вы ни делали в User::ngOnInit не будет работать снова, когда вы переходите от / user до / user / 123.

не забудьте поставить <router-outlet></router-outlet> на 'ы.

L.P. · Accepted Answer · 2017-12-07 22:52:13

столкнулся с другим экземпляром этой проблемы, и в поисках решения он пришел сюда. Моя проблема заключалась в том, что я делал детей, а также ленивую загрузку компонентов, чтобы немного оптимизировать вещи. Короче говоря, если вы ленивы загрузки родительского модуля. Главное, что я использовал'/: id 'в маршруте, и это жалобы на то, что' / ' является его частью. Не проблема здесь, но это относится.

приложение-маршрутизация от родителя
...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...
дочерние маршруты ленивые загружено
...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...