hola quiero pasar unos params con ruteo en angular 4
app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { StartGameComponent } from './start-game/start-game.component'; import { GameComponent } from './game/game.component'; const appRoutes: Routes = [ { path: '', redirectTo: '/first', pathMatch: 'full' }, { path: 'startGame', component: StartGameComponent }, {path: 'game/:width/:height',component: GameComponent } ]; @NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule] }) export class AppRoutingModule { }en el componente StartGameComponent
goToGameComponent(width:string,height:string){ this.router.navigate(['game', {width:width,height:height}]); }en componente GameComponent
ngOnInit() { this.route.params.forEach((urlParams) => { this.width= urlParams['width']; this.height=urlParams['height']; });en aplicación.componente.html
<div> <md-toolbar color="primary"> <span>MineSweeper Wix</span> </md-toolbar> <router-outlet></router-outlet> <span class="done"> <button md-fab> <md-icon>check circle</md-icon> </button> </span> </div>me arroja un error
No se puede hacer coincidir ninguna ruta. Segmento de URL: 'juego; ancho = 10; altura = 10'
Está mezclando la sintaxis de los parámetros de enrutamiento necesarios con parámetros de enrutamiento opcionales.
Angular proporciona tres tipos de parámetros de ruta: 1) Parámetros requeridos. 2) Parámetros opcionales. 3) Parámetros de consulta.
Los parámetros obligatorios son para valores obligatorios, como un Id. para mostrar una página de detalles. ¿Se requiere el ancho y la altura en su caso?
Los parámetros opcionales son para valores que no siempre son necesarios, como pasar los criterios de búsqueda ingresados a una página de lista que debería usar esos criterios.
Los parámetros de consulta son similares a los parámetros opcionales, pero puede conservarlos en todas las rutas. Entonces, si desea enrutar a algún lugar y regresar, puede conservar los parámetros.
SOLO los parámetros requeridos se definen en la configuración de la ruta. Los parámetros opcionales y de consulta no están incluidos en la configuración de la ruta (por lo que la ruta sería solo 'juego')
La sintaxis para configurar los parámetros es diferente según el tipo:
Parámetros requeridos: this.router.navigate(['game', width, height]);
Parámetros opcionales: this.router.navigate(['game', {width:width,height:height}]);
Parámetros de consulta: this.router.navigate(['game', { queryParams: {width:width, height:height}}])
Para obtener más información, consulte esto: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents
Necesitaba algo como pasar los múltiples parámetros de consulta construyéndolos dinámicamente. Por lo tanto, realice los siguientes pasos para lograr lo mismo:
Por ejemplo,
const arrayItem = [{ source: "external" }, { fileFiler: "File Name 1" }]; const queryParams = arrayItem.reduce((arrObj, item) => Object.assign(arrObj, item, {})); // this will convert into single object. // Output: {source: "external", fileFiler: "File Name 1"}Y finalmente llamó a la siguiente línea para pasar lo mismo a la ruta:
this.router.navigate([], { relativeTo: this.activatedRoute, queryParams });¡Espero que esto ayude!