Parámetro de ruta opcional angular 2

¿Es posible tener un parámetro de ruta opcional en la ruta Angular 2? Probé la sintaxis Angular 1.x en RouteConfig pero recibí el siguiente error:

"EXCEPCIÓN ORIGINAL: Ruta" / usuario /: id? "Contiene"? "Que no está permitido en una configuración de ruta".

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

Puede definir múltiples rutas con y sin parámetro:

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

y maneje el parámetro opcional en su componente:

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

    if (paramId) {
        ...
    }
}

Consulte también el tema relacionado de github: https://github.com/angular/angular/issues/3525

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

De esta forma, el componente no se vuelve a representar cuando se agrega el parámetro.

Se recomienda utilizar un parámetro de consulta cuando la información es opcional.

Parámetros de ruta o parámetros de consulta?

No hay una regla estricta. En general,

prefiera un parámetro de ruta cuando

• Se requiere el valor.
• el valor es necesario para distinguir una ruta de ruta de otra.

prefiera un parámetro de consulta cuando

• El valor es opcional.
• El valor es complejo y / o multivariado.

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

Solo necesita sacar el parámetro de la ruta de la ruta.

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

Angular 4: solución para abordar el orden del parámetro opcional:

HACER ESTO:

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

Tenga en cuenta que las rutas productsy products/:idse nombran exactamente igual. Angular 4 seguirá correctamente las productsrutas sin parámetro, y si es un parámetro, seguirá products/:id.

Sin embargo, la ruta para la ruta sin parámetros noproducts debe tener una barra inclinada final; de lo contrario, angular la tratará incorrectamente como una ruta de parámetros. Entonces, en mi caso, tuve la barra inclinada final para los productos y no estaba funcionando.

NO HAGAS ESTO:

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

La respuesta de Rerezz es bastante agradable, pero tiene una falla grave. Hace que el Usercomponente vuelva a ejecutar el ngOnInitmétodo.

Puede ser problemático cuando haces cosas pesadas allí y no quieres que se vuelva a ejecutar cuando cambias de la ruta no paramétrica a la paramétrica. Aunque esas dos rutas están destinadas a imitar un parámetro de url opcional, no se convierten en 2 rutas separadas.

Esto es lo que sugiero para resolver el problema:

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

Luego puede mover la lógica responsable de manejar el parámetro al UserWithParamcomponente y dejar la lógica base en el Usercomponente. Lo que hagas User::ngOnInitno se volverá a ejecutar cuando navegues de / user a / user / 123 .

No se olvide de poner el <router-outlet></router-outlet>de la Userplantilla 's.

Las respuestas sugeridas aquí, incluida la respuesta aceptada de rerezz que sugiere agregar múltiples entradas de ruta funcionan bien.

Sin embargo, el componente se volverá a crear al cambiar entre las entradas de ruta, es decir, entre la entrada de ruta con el parámetro y la entrada sin el parámetro.

Si desea evitar esto, puede crear su propio emparejador de ruta que coincida con ambas rutas:

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

Luego use el matcher en su configuración de ruta:

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

Con angular4 solo necesitamos organizar las rutas juntas en jerarquía

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

Esto funciona para mi. De esta forma, el enrutador sabe cuál es la siguiente ruta en función de los parámetros de ID de opción.

Me encontré con otra instancia de este problema, y ​​en la búsqueda de una solución llegó aquí. Mi problema era que estaba haciendo a los niños y cargando de forma diferida los componentes también para optimizar un poco las cosas. En resumen, si eres perezoso cargando el módulo principal. Lo principal fue que usé '/: id' en la ruta, y son quejas de que '/' sea parte de ella. No es el problema exacto aquí, pero se aplica.

Enrutamiento de aplicaciones del padre

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

Rutas secundarias cargadas perezosas

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

No puedo comentar, pero en referencia a: Angular 2 parámetro de ruta opcional

una actualización para Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

Consulte https://angular.io/api/router/ActivatedRoute para obtener información adicional sobre el enrutamiento de Angular6.

Ante un problema similar con la carga diferida, he hecho esto:

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

Y luego en el componente:

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

De esta manera:

• La ruta sin /se redirige a la ruta con. Debido a esto pathMatch: 'full', solo se redirige dicha ruta completa específica.

• Entonces, users/:idse recibe. Si la ruta real fue users/, ides "", así que regístrese ngOnInity actúe en consecuencia; de lo contrario, ides la identificación y proceder.

• El resto del componente actúa sobre selectedUsero no indefinido (* ngIf y cosas así).