Кутовий 2 необов'язковий параметр маршруту

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

"ОРИГІНАЛЬНЕ ВИКОНАННЯ: Шлях" / 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/isissue/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'
}])

Кутова 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},
...

Відповідь rerezz є досить приємною, але вона має один серйозний недолік. Це змушує Userкомпонент повторно запустити ngOnInitметод.

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

Ось що я пропоную вирішити проблему:

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);
 }

Потім використовуйте відповідник у налаштуваннях маршруту:

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 параметра.

Сюди потрапив ще один екземпляр цієї проблеми, і в пошуках її вирішення прийшов сюди. Моє питання полягало в тому, що я займаюся дітьми, і ліниве завантаження компонентів, а також трохи оптимізувати речі. Коротше кажучи, якщо вам лінь завантажувати батьківський модуль. Головним було моє використання "/: 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
      },
    ]
  }
];
...

Я не можу коментувати, але посилаючись на: Кутовий 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/ActivateRoute для отримання додаткової інформації про маршрутизацію 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 і подібні речі).