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.