javascript - page - Parámetro de ruta opcional angular 2

rutas angular 6

Question

¿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''
}])

Answer 1

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 los products y las rutas products/:id se denominan exactamente igual. Angular 4 seguirá correctamente los products para rutas sin parámetros, y si es un parámetro, seguirá los products/:id .

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

NO HAGAS ESTO:

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

Answer 2

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 pathMatch: ''full'' , solo se redirige dicha ruta completa específica.

• Luego, se recibe los users/:id . Si la ruta real era users/ , id es "" , así que ngOnInit en ngOnInit y actúe en consecuencia; de lo contrario, id es el id y proceder.

• El resto del componente actúa en el usuario selectedUser es o no indefinido (* ngIf y cosas así).

Answer 3

Con angular4 solo necesitamos organizar 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.

Answer 4

La respuesta de Rerezz es bastante agradable, pero tiene una falla grave. Hace que el componente User vuelva a ejecutar el método ngOnInit .

Puede ser problemático cuando haces algunas 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 UserWithParam componente UserWithParam y dejar la lógica base en el componente User . Lo que haga en User::ngOnInit no se volverá a ejecutar cuando navegue de / user a / user / 123 .

No olvide poner el <router-outlet></router-outlet> en la plantilla del User .

Answer 5

Las respuestas sugeridas aquí, incluida la respuesta aceptada de 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,
    }
];

Answer 6

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 carga perezosa

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

Answer 7

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.

Answer 8

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

Answer 9

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''
}])

Answer 10

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

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