Navegación con parámetros

Clase 19 de 63 • Curso de Angular 6 2018

Resumen

Al navegar entre pantallas, hay ocasiones en las que es necesario pasar datos particulares. Usando routerLink podemos incluir parámetros de manera similar a como lo hacemos con subdominios o subdirectorios. Para recibir e interpretar estos parámetros correctamente es necesario definir las rutas específicas en appRoutes y consultarlos luego en el componente con el objeto ActivatedRoute.

Adrian Alberto Casas Lopez

student•

En angular 8 marca un warning al querer ingresar de esta manera al parampetro:

this.activatedRoute.snapshot.params['uid'];

pero funciona, también se puede de la siguiente manera:

this.activatedRoute.snapshot.params.uid;

Carlos Enrique Ramírez Flores

student•

convesation.component.ts 27/08/2018

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
	freindId: any;
  constructor(private activatedRoute: ActivatedRoute) {
  	this.freindId = this.activatedRoute.snapshot.params['uid'];
  }

  ngOnInit() {
  }

}```

Alex Eugenio Gavidia Donayre

student•

Enseña todos los detalles para poder enter el framework

Alex Eugenio Gavidia Donayre

student•

Excelente curso

Mario Alejandro Macias Ortiz

student•

Como traer varios parametros?

Bryan Alejandro Sánchez Ramírez

student•

Siguendo ese mismo escenario tu tendrías que tener una ruta mas o menos de este estilo: conversation/:uid/:param2/:param3

Para obtenerlo es lo mismo

this.param2 = this.activatedRoute.snapshot.params.param2;
this.param3 = this.activatedRoute.snapshot.params.param3;

Jeison Sneider Ruiz Zemanate

student•

conversation.component.ts ---->

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  constructor(private activatedRoute: ActivatedRoute) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);
  }

  ngOnInit() {
  }

}

app.modules.ts —>

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: 'login', component: LoginComponent},
  {path: 'conversation/:uid', component: ConversationComponent},
  {path: 'profile', component: ProfileComponent},
];

home.component.html ---->

<br/>
<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends; let i = index">

  <div *ngIf="user.friend">
    <a routerLink="/conversation/{{user.uid}}" >
      {{i}}. {{user.nick}} - {{user.email}}
    </a>

  </div>

</ng-container>

<b>No Agregadoss</b>
<ng-container *ngFor="let user of friends; let i = index">

  <div *ngIf="!user.friend">
    <a routerLink="/conversation/{{user.uid}}" >
      {{i}}. {{user.nick}} - {{user.email}}
    </a>
  </div>



</ng-container>

Carlos Uriel de Jesus Sánchez González

student•

conversation.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
  friendId: any;
  constructor(private activatedRoute: ActivatedRoute) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);
  }

  ngOnInit() {
  }

}

Romario Augusto Estrada Flórez

student•

Está como larguito coger el id pero esta muy chevere!

Alex Eugenio Gavidia Donayre

student•

Si te parece largo esas pequeñas líneas. Que sobre todo en muchos lenguajes es de una manera similar.

Alex Eugenio Gavidia Donayre

student•

Estas perdido xd

Diego Esteban Cortés Escandón

student•

muy buen curso, he entendido todo!

Walter Lensinas

student•

Buenas tardes, dejo el código de las clase en este repositorio

Para ver el código:

git clone https://github.com/wlensinas/platzinger-wl.git
git checkout 19-navigate
npm install
ng serve --open

Saludos.

Edgar Castelo Romero

company_admin•

¿Cual es la diferencia de utilizar routerLink con o sin corchetes?

<a [routerLink]="['/conversation', user.uid]">

<a routerLink="/conversation/{{user.uid}}">

Juan Diego Lopez Triana

student•

Cuando usas corchetes puedes pasar una bind property (una variable) que puedes definir en la clase, y cuando no los usas pasas la ruta como tal.

Francisco Manuel Velásquez Escobar

student•

Acá un poco más de info:

Damaris Quiroz

student•

En todo esto no me queda muy claro para qque funciona el snapshot.params

Juan C Felizzola

student•

Si imprimes solo this.activatedRoute te darás cuenta que es un objeto que trae muchas cosas.
Con

this.activatedRoute.snapshot.params['uid']

Estamos trayendo el parámetro que le pasamos a la ruta que especificamos, en este caso estamos trayendo el uid del usuario que clickeemos. Todo esto para poder usar los valores de ese usuario en la otra ruta.

Usuario anónimo

user•

Gracias me sirvió para entender la función de un snapshot.

Ariel Virgilio Solano Gonzalez

student•

No entiendo cuando dice que tenemos que recuperar el uid del url

Charlie Galdamez Madrid

student•

Proviene de la ruta de navegación. Por ejemplo

localhost:4200/conversation/123

En este caso, el parámetro que estás obteniendo es 123, esto sucede por cómo se configuró la ruta en app.module.ts.

{path: 'conversation/:uid', component: ConversationComponent}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
	freindId: any;
  constructor(private activatedRoute: ActivatedRoute) {
  	this.freindId = this.activatedRoute.snapshot.params['uid'];
  }

  ngOnInit() {
  }

}```

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {

  friendId: any;
  constructor(private activatedRoute: ActivatedRoute) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);
  }

  ngOnInit() {
  }

}

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: 'login', component: LoginComponent},
  {path: 'conversation/:uid', component: ConversationComponent},
  {path: 'profile', component: ProfileComponent},
];

<br/>
<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends; let i = index">

  <div *ngIf="user.friend">
    <a routerLink="/conversation/{{user.uid}}" >
      {{i}}. {{user.nick}} - {{user.email}}
    </a>

  </div>

</ng-container>

<b>No Agregadoss</b>
<ng-container *ngFor="let user of friends; let i = index">

  <div *ngIf="!user.friend">
    <a routerLink="/conversation/{{user.uid}}" >
      {{i}}. {{user.nick}} - {{user.email}}
    </a>
  </div>



</ng-container>

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-conversation',
  templateUrl: './conversation.component.html',
  styleUrls: ['./conversation.component.css']
})
export class ConversationComponent implements OnInit {
  friendId: any;
  constructor(private activatedRoute: ActivatedRoute) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    console.log(this.friendId);
  }

  ngOnInit() {
  }

}

Navegación con parámetros

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos