Угловой 2 необязательный параметр маршрута

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

«ORIGINAL EXCEPTION: Path» / user /: id? »Содержит«? », Что не разрешено в конфигурации маршрута.»

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

Вы можете определить несколько маршрутов с параметром и без него:

@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

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

Таким образом, компонент не перерисовывается при добавлении параметра.

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

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

Здесь нет строгих правил. В основном,

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

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

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

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

из https://angular.io/guide/router#optional-route-parameters

Вам просто нужно вынуть параметр из пути маршрута.

@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

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

СДЕЛАЙ ЭТО:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

Обратите внимание, что productsи products/:idмаршруты называются точно так же. Angular 4 будет правильно следовать productsдля маршрутов без параметров, а если за параметром он будет следовать products/:id.

Однако путь для маршрута без параметров неproducts должен иметь косую черту, в противном случае angular будет неверно рассматривать его как путь параметра. Так что в моем случае, у меня была косая черта для продуктов, и она не работала.

НЕ ДЕЛАЙТЕ ЭТОГО:

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

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

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

Вот что я предлагаю для решения проблемы:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

Затем вы можете переместить логику, отвечающую за обработку параметра, на UserWithParamкомпонент и оставить базовую логику в Userкомпоненте. Все, что вы делаете, User::ngOnInitбольше не будет выполняться при переходе от / user к / user / 123 .

Не забудьте поставить <router-outlet></router-outlet>в Userшаблоне «S.

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

Однако компонент будет воссоздан при изменении между записями маршрута, то есть между записью маршрута с параметром и записью без параметра.

Если вы хотите избежать этого, вы можете создать свой собственный сопоставитель маршрутов, который будет соответствовать обоим маршрутам:

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

Затем используйте matcher в вашей конфигурации маршрута:

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

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

Это работает для меня. Таким образом, маршрутизатор узнает, какой следующий маршрут, основываясь на параметрах идентификатора опции.

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

App-маршрутизация от родителя

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

Я не могу комментировать, но в отношении: Angular 2 необязательный параметр маршрута

обновление для Angular 6:

import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
  let paramId = route.params.pipe(map(p => p.id));

  if (paramId) {
    ...
  }
}

См. Https://angular.io/api/router/ActivationRoute для получения дополнительной информации о маршрутизации Angular6.

Столкнувшись с аналогичной проблемой с отложенной загрузкой, я сделал это:

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

А потом в компоненте:

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

Сюда:

• Маршрут без /перенаправляется на маршрут с. Из-за pathMatch: 'full', только такой конкретный полный маршрут перенаправлен.

• Затем users/:idполучен. Если фактический маршрут был users/, idесть "", так проверьте его ngOnInitи действуйте соответственно; иначе, idэто идентификатор и продолжить.

• Остальная часть компонента действует selectedUserили не определена (* ngIf и тому подобное).