Agregar parametros al navegar en Angular

존재하는 경우에는 매개 변수, 일반 식별자, 일반 정보, 라마 사용에 대한 루틴 또는 API에 대한 정보 제공이 필요하지 않습니다. En esta ocasión vamos a ver cómo definir una ruta que acepta un parametro, como utilizar la directiva routerLink para pasar el valor del parametro a través de la ruta y también cómo acceder al valor del parametro desde un componente.

새로운 구성 요소 생성

En primer lugar vamos a crear un nuevo componente ejecutando el siguiente comando del Angular CLI:

ng generate component post

디피니르 라 누에바 루타

Lo próximo a realizar es agregar una nueva ruta hacia nuestro nuevo componente en el array de definiciones de rutas dentro de app.module.ts . Vamos a crear un nuevo objeto y esta vez en la propiedad path necesitaremos agregar /:id Para indicar que la ruta espera recibir un parámetro llamado id . La definición de las rutas quedará de la siguiente forma:

// src/app/app.module.ts
const routes: Route[] = [
  { path: "home", component: HomeComponent },
  { path: "posts", component: PostsComponent },
  { path: "posts/:id", component: PostComponent },
  { path: "**", redirectTo: "home" }
];

Si ejecutamos el comando ng serve podremos navegar a nuestro nuevo componente modificando la URL de nuestro navegador a, por ejemplo, /posts/1 . De esta forma, el valor del parametro id será el que pasemos al final de la URL.

Enlazar con nuestra aplicación

Para navegar hacia el nuevo componente desde nuestra aplicación haremos uso de la directiva routerLink y agregaremos algunos valores de parámetros para simular un listado de link de navegación dentro de nuestro PostsComponent .

<!-- src/app/posts/posts.component.html -->
<ul>
  <li><a [routerLink]="['/posts', 1]">Post 1</a></li>
  <li><a [routerLink]="['/posts', 2]">Post 2</a></li>
  <li><a [routerLink]="['/posts', 3]">Post 3</a></li>
</ul>

De esta manera le indicamos a Angular que queremos navegar a las rutas /posts/1 , /posts/2 o /posts/3 al hacer click en alguno de los 링크.

Obtener el valor del parametro

Como hablamos al principio, es posible que querramos obtener cierta información utilizando el valor del parametro id por lo que vamos a analizar las alternativas que tenemos para lograrlo.

Hay dos maneras diferentes de obtener el valor del parametro.

La primera es a través del snapshot de la ruta. El snapshot de la ruta nos proofe de un objeto llamado paramMap que expone los métodos get , getAll Y has para interactuar con los parametros de la ruta actual.

Para acceder al snapshot de la ruta es necesario inyectar en el componente la clase ActivatedRoute como se muestra a continuación:

// src/app/post/post.component.ts
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get("id");
  }
}

Y, para simplificar el ejemplo, vamos a simplemente mostrar el valor en el html:

<!-- src/app/post/post.component.html -->
<p>
  Post con id: {{ id }}
</p>

Haciendo click sobre cada link observaremos que la aplicación muestra correctamente el valor del parámetro. Sin embargo, esta alternativa para obtener el valor del identificador tiene una falencia ya que si la navegación a otros post se produce dentro de nuestro PostCompoent , éste no detecta el cambio en el paramMap por lo que no realiza la navegación.

los cambios en paramMap 등록

Para solucionar el inconveniente antes mencionado debemos reemplazar el uso del snapshot de la ruta por una suscipción al parametro paramMap 델 ActivatedRoute 인젝타도. De esta forma estaremos observando los cambios que suceden sobre los parametros de la ruta y reaccionando correctamente ante cada uno de ellos.

El componente pasaría verse de la siguiente forma:

// src/app/post/post.component.ts
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from "@angular/router";

@Component({
  selector: "app-post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
    });
  }
}

Lo más importante a recordar a la hora de decidir entre cuáles de los métodos utilizar es saber en dónde sucede el cambio del parámetro.

Si el valor del parametro es modificado dentro del mismo componente que lo utiliza entonces debemos suscribirnos alparamMap .

En caso de que este no sea alterado dentro del componente podremos utilizar el snapshot de la ruta sin inconvenientes.

Aquí se puede ver el código final:



Stackblitz