Opcjonalny parametr trasy kątowej 2

Czy można mieć opcjonalny parametr trasy w trasie Angular 2? Wypróbowałem składnię Angular 1.x w RouteConfig, ale otrzymałem poniższy błąd:

„ORYGINALNY WYJĄTEK: ścieżka” / user /: id? ”Zawiera znak„? ”, Który nie jest dozwolony w konfiguracji trasy.”

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

Możesz zdefiniować wiele tras z parametrem i bez:

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

i obsłuż opcjonalny parametr w swoim komponencie:

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

Zobacz także powiązany problem z githubem: https://github.com/angular/angular/issues/3525

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

W ten sposób komponent nie jest ponownie renderowany po dodaniu parametru.

Zaleca się użycie parametru zapytania, gdy informacje są opcjonalne.

Parametry trasy czy parametry zapytania?

Nie ma sztywnej reguły. Ogólnie,

wolisz parametr trasy, kiedy

• wartość jest wymagana.
• wartość jest niezbędna do odróżnienia jednej ścieżki od drugiej.

preferuj parametr zapytania, kiedy

• wartość jest opcjonalna.
• wartość jest złożona i / lub wielozmienna.

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

Wystarczy wyjąć parametr ze ścieżki trasy.

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

Kątowe 4 - Rozwiązanie dotyczące zamawiania opcjonalnego parametru:

ZRÓB TO:

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

Zwróć uwagę, że trasy productsi products/:idmają dokładnie takie same nazwy. Angular 4 będzie poprawnie podążał productsza trasami bez parametru, a jeśli parametr będzie podążał products/:id.

Jednak ścieżka dla trasy productsnieparametrowej nie może mieć końcowego ukośnika, w przeciwnym razie angular niepoprawnie potraktuje ją jako ścieżkę parametru. Więc w moim przypadku miałem końcowy ukośnik dla produktów i nie działał.

NIE ROBIĆ TEGO:

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

odpowiedź rerezz jest całkiem niezła, ale ma jedną poważną wadę. Powoduje Userto ponowne uruchomienie ngOnInitmetody przez komponent .

Może to być problematyczne, gdy robisz tam ciężkie rzeczy i nie chcesz, aby były ponownie uruchamiane, gdy przełączasz się z trasy nieparametrycznej na parametryczną. Chociaż te dwie trasy mają imitować opcjonalny parametr adresu URL, a nie stać się dwoma oddzielnymi trasami.

Oto, co proponuję, aby rozwiązać problem:

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

Następnie możesz przenieść logikę odpowiedzialną za obsługę parametru do UserWithParamkomponentu i pozostawić logikę podstawową w Userkomponencie. Cokolwiek zrobisz User::ngOnInit, nie zostanie uruchomione ponownie, gdy przejdziesz z / user do / user / 123 .

Nie zapomnij umieścić znaku <router-outlet></router-outlet>w Userszablonie.

Sugerowane odpowiedzi tutaj, w tym zaakceptowana odpowiedź z ponownego odtworzenia, która sugeruje dodanie wielu wpisów trasy, działają dobrze.

Jednak komponent zostanie odtworzony podczas zmiany między wpisami trasy, tj. Między wpisem trasy z parametrem a wpisem bez parametru.

Jeśli chcesz tego uniknąć, możesz utworzyć własny element dopasowujący trasę, który będzie pasował do obu tras:

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

Następnie użyj dopasowania w konfiguracji trasy:

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

W angular4 musimy po prostu zorganizować trasy razem w hierarchii

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

To działa dla mnie. W ten sposób router wie, jaka jest następna trasa na podstawie parametrów id opcji.

Wpadłem na inny przykład tego problemu i szukając rozwiązania przyszedł tutaj. Mój problem polegał na tym, że robiłem dzieci i leniwe ładowanie komponentów, aby trochę zoptymalizować. Krótko mówiąc, jeśli jesteś leniwy podczas ładowania modułu nadrzędnego. Najważniejsze było to, że użyłem „/: id” w trasie i narzekałem, że „/” jest jej częścią. Nie jest to dokładny problem, ale dotyczy.

Routing aplikacji od rodzica

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...

Trasy podrzędne są ładowane z opóźnieniem

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...

Nie mogę komentować, ale w odniesieniu do: opcjonalnego parametru trasy w Angular 2

aktualizacja dla Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Więcej informacji na temat routingu Angular6 można znaleźć pod adresem https://angular.io/api/router/ActivatedRoute .

W obliczu podobnego problemu z leniwym ładowaniem zrobiłem to:

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

A potem w komponencie:

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

Tą drogą:

• Trasa bez /jest przekierowywana na trasę z. Z tego powodu pathMatch: 'full'przekierowywana jest tylko taka konkretna pełna trasa.

• Następnie users/:idjest odbierany. Jeśli rzeczywista trasa była users/, idjest "", sprawdź ją ngOnIniti postępuj zgodnie z nią; w przeciwnym razie idjest id i kontynuuj.

• Reszta składnika, na który działa, selectedUserjest lub nie jest nieokreślona (* ngIf i tym podobne).