Router

Question 1

¿Qué directiva permite establecer la clase de la ruta activa?

Answer 1

Respuesta: routerLinkActive

Ejemplo:

<a>Bob</a>
<a>Bob</a>

Question 2

¿Qué directiva permite configurar las opciones de la ruta activa?

Answer 2

Respuesta: routerLinkActiveOptions

Ejemplo:

<a>Bob</a>

Question 3

¿Cómo navegar de forma programática?

Answer 3

Repuesta: router.navigate

Ejemplo:
import { Router } from ‘@angular/router’;

constructor(private router: Router) {}

gotoItems(hero: Hero) {
this.router.navigate([‘/heroes’, { id: heroId }]);
}

Question 4

¿Cómo navegar de forma programática a una ruta relativa?

Answer 4

Repuesta: router.navigate([‘items’], { relativeTo: this.route });

Ejemplo:

constructor(
private route: ActivatedRoute,
private router: Router ) {}

gotoItems() {
this.router.navigate([‘items’], { relativeTo: this.route });
}

Question 5

¿Cómo recuperar los parámetros de una ruta de forma estática?

Answer 5

Respuesta: route.snapshot.params

Ejemplo:

constructor(route: ActivatedRoute) {
const id: string = route.snapshot.params.id;
const name: string = route.snapshot.params[‘name’];
}

Question 6

¿Cómo recuperar los parámetros de una ruta de forma dinámica?

Answer 6

Respuesta: route.params.subscribe

Ejemplo:

ngOnInit() {
  this.route.params.subscribe(params => {
    this.name = params['name'];
  });
}

Question 7

¿Qué directiva permite añadir query params a la ruta establecida por [routerLink]?

Answer 7

Respuesta: [queryParams]

Ejemplo:

<a>
link to user component
</a>

Question 8

¿Cómo navegar de forma programática a una ruta estableciendo query params?

Answer 8

Respuesta: router.navigate([‘/products’], { queryParams: { order: ‘popular’ } });

Ejemplo:

goProducts() {
this.router.navigate([‘/products’], { queryParams: { order: ‘popular’ } });
}

Question 9

¿Es necesario gestionar manualmente la desubscripción de los observables params y queryParams del objeto ActivatedRoute?

Answer 9

No, la desubscripción es gestionada automáticamente por Angular.

Question 10

¿Cómo recuperar los query params de una ruta de forma estática?

Answer 10

Repuesta: route.snapshot.queryParams

Ejemplo:

constructor(route: ActivatedRoute) {
const name: string = route.snapshot.queryParams[‘name’];
}

Question 11

¿Cómo recuperar los query params de una ruta de forma dinámica?

Answer 11

Respuesta: route.queryParams.subscribe

Ejemplo:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params.name);
  });
}

Question 12

¿Cómo definir “child routes”?

Answer 12

Respuesta: Propiedad children de Route

Ejemplo:

export const routes: Routes = [
{ path: ‘’, redirectTo: ‘product-list’, pathMatch: ‘full’ },
{ path: ‘product-list’, component: ProductList },
{ path: ‘product-details/:id’, component: ProductDetails,
children: [
{ path: ‘’, redirectTo: ‘overview’, pathMatch: ‘full’ },
{ path: ‘overview’, component: Overview },
{ path: ‘specs’, component: Specs }
]
}
];

Question 13

¿Cómo preservar los query params al cambiar de ruta (sin añadir nuevos parámetros)?

Answer 13

Respuesta: queryParamsHandling: “preserve”

Ejemplo:

this.router.navigate([‘/view2’], { queryParamsHandling: “preserve”
});

Question 14

¿Cómo preservar los query params al cambiar de ruta (añadiendo nuevos parámetros)?

Answer 14

Respuesta: queryParamsHandling: “merge”

Ejemplo:

this.router.navigate([‘/view2’], { queryParams: { otherKey: 2 }, queryParamsHandling: “merge”
});

Question 15

¿Cómo redirigir usando una ruta “catch-all”?

Answer 15

Respuesta: { path: “**”, redirectTo: “/not-found” }

Question 16

¿Por qué el siguiente fragmento provoca error?

{ path: ‘’, redirectTo: ‘/somewhere-else’ }

Answer 16

Respuesta:

Es necesario añadir pathMatch: ‘full’. ya que la estrategia por defecto prefix provoca una redirección infinita.

Ejemplo:

{ path: ‘’, redirectTo: ‘/somewhere-else’, pathMatch: ‘full’ }

Question 17

¿Tipos de Route Guards?

Answer 17

Respuesta:

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve