Parámetros tipo Query

Excelente curso, vaya. Antes de este curso solamente había visto Angular 2 en la universidad en una clase pero explicado de una manera demasiado superficial, había quedado con una especie de miedo a Angular. Pero le he dado una oportunidad con este curso y ya veo que no fue una equivocación. Me está gustando mucho.

Esteban José Pagano

que hace exactamente el snapshot?

Diego Forero

Team Platzi

Es un método que tiene la interface de ActivatedRoute, este permite obtener la información de la ruta (url) actual.

Juan Amo

Curso excelente!
¿Cómo se podrían pasar parámetros y enrutar desde un botón sin que se vean en el navegador? Por ejemplo, que solo se viera “platzisquare/detalles” pero realmente se pasara un parámetro al componente de detalles?

Diego Forero

Team Platzi

Puedes pasarlo usando un formulario y el método POST.

Juan Amo

Me refería a hacerlo como en AngularJS:
.state(‘editempresa’, {
url: ‘/administracion/empresas’,
views: {
‘content’: {
templateUrl: ‘app/administracion/empresas/empresas_edit.html’,
controller: ‘EmpresasEditController’
}
},
params: { ‘IdEmpresa’: ‘’ }
})

$state.go(‘editempresa’, { IdEmpresa: 2 });

Una duda.¿Como pego imagenes aquí?

Carlos Uriel de Jesus Sánchez González

this.route.snapshot.queryParams['nameParam']

Carlos Uriel de Jesus Sánchez González

[queryParams]="{action:'view', action2:'view2'}"

Víctor Hugo Rivas Sánchez

Los Query string son útiles al momento de realizar búsquedas o filtros. Por ejemplo, cuando quieres consumir un servicio hacia el backend tipo GET (una búsqueda por ejemplo), puedes colocar los diferentes filtros (nombre, apellido, sexo, etc)

Rodolfo Sáenz

¿Porqué [queryParams] va entre corchetes y routerLink no?

Alejandro Martínez

Todas las directivas pueden ir entre corchetes o no, la ventaja de usar los corchetes es que referencías una variable… ejemplo:

routerLink="ruta/usuarios/"

Con esto le dices a angular que el valor interno en routerLink es un string que vale: “ruta/usuarios/”

Pero qué sucedería si tuvieras una ruta que cambia dinámicamente?. Si haces el mismo ejemplo y le quieres pasar el id:

routerLink="ruta/usuarios/user.id"

No funcionaría ya que nuevamente tienes un string plano… aquí es donde entran los corchetes to the rescue:

[routerLink]="['ruta/usuarios/', user.id]"

Y con esto Angular entiende que el parámetro que definiste en tu router debe ser sustituido por ese valor que es una variable procedente de tu .ts.

Lo mismo funciona para todos las directivas que tengan un @Input (como lo es queryParams) que es lo que te permite bindear esos valores.

Espero no haberte confundido más.

Jesús Miguel Moreno Plasencia

good explicación @OCAPITALMX

Luis Pena

RouterLinkcme funciono perfectamente, pero cuando habro el proyecto de nuevo con ng serve me da un error y hace referencia a route. Src/app/app.module.ts

Duilio Luque

Es posible pasar como parámetro todo un objeto? para el proyecto que estamos desarrollando, podemos mandar un lugar como parámetro?

José Luis Raffalli

Hola!
Contestando tu pregunta:
Sí, puedes enviar cualquier tipo de información al componente que desees.
Sin embargo, recuerda que el router de Angular necesita serializar la información en el URL, lo cual no es una buena práctica si estas buscando pasar un objeto completo (por temas de seguridad, optimización etc).
Para esto, puedes crear un servicio en Angular que pueda encargarse de pasar objetos entre componentes, o usar otros métodos como la inicialización del componente con el decorador @Input.

Seguramente puedas conseguir en Internet mejor información al respecto y en el curso me imagino que luego tocarán ese tema en específico.
Saludos !

Jhonatan Steven Yepes

Como dice @keydash es mejor capurar los fltros de la consulta, es decir, enviar un id, un codigo de lugar, latitud y longitud, etc… y luego desde el componente que recibe llamar un servicio que me devuelva el o los lugares que cumplas estos filtros.

Wilfredo Bardales

yo lo hice así , pero me sigue saliendo undefined

page.component.html
<a routerLink="/detalle/{{lugar.id}}" [queryParams]="{action:'view',referer:'google'}">

Detalle.component.ts
console.log(this.route.snapshot.queryParams['view']);
console.log(this.route.snapshot.queryParams['google']);

Wilfredo Bardales

estoy usando angular 6

Emeldo Quiros

el problema es simple amigo, solo debe cambiar, a view x action y google por referer

console.log(this.route.snapshot.queryParams['action']);
console.log(this.route.snapshot.queryParams['referer']);

Carlos Castillo Perez

Como podria aplicarle un encriptado a los parametros

Mi idea es pasar un solo parametro, pero ese parametro estaria compuesto por mis N datos separados por el caracter pipe (|), encriptrar la cadena y enviarla…posteriormente se aplicaria el metodo inverso para desepencriptar la cadena y separarla.

detalle?params=id|param1|param2
convertilo a esto
detalle?params=SFD565CDDwe_ht

Nelson Celis

Company_admin

Genial!! Excelente curso!! Muchas Gracias…

Rodrigo Gil Lopetegui

Para agregar otra forma que he visto de ruteo es mediante servicios: setear el elemento actual al llamar a la otra ruta, y luego desde detalle preguntar cual es el elemento actual. Las rutas así quedan limpias y legíbles sin tantos tantos parámetros. Supongo que se ve después en area de servicios.
Muy bueno el curso la verdad, me gusta cómo se van llevando los contenidos y el paso a paso incluso con errores.

Usuario anónimo

User

Muy útil.

[queryParams]="{action2:'edit',referer:'google'}"```

VICTOR ALFONSO AGUILARTE SANTIL

Excelente método muy útil para algunos problemas..

Estefania Janet Rodriguez

No entiendo para que sirve exactamente Query

Diego Forero

Team Platzi

Son útiles cuando quieres agregar datos pero que no sean obligatorios, por ejemplo te pueden servir para saber por donde llega el usuario a visitar esa pagina, también son usados para hacer filtros ya que permanecen en la url y vas a tener el parámetro del filtro siempre disponible.

María Guadalupe Borjas González

Si quisiera pasar diferentes parámetros sin actualizar la vista, como se haría, ya que solo reconoce el primero que se envía

<a class="dropdown-item" routerLink="/personajes" [queryParams]="{ordenar:'peso'}">weight</a>
          <a class="dropdown-item" routerLink="/personajes" [queryParams]="{ordenar:'altura'}">height</a>

Carlos Federico Rubio Prias