Pasar datos a rutas en Angular

Pasar datos a rutas en Angular

En este tutorial, aprenderemos cómo pasar datos a rutas angulares.

En Angular podemos pasar los datos a una ruta usando data objeto y acceder a esos datos dentro de los componentes usando ActivatedRoute.

Índice
  1. Pasar datos a la ruta
  2. Acceder a los datos dentro de los componentes

Pasar datos a la ruta

{path: "post", component : PostComponent,data: {msg: "Welcome" }}

En el código anterior, pasamos datos a un post ruta usando objeto de datos
data: {msg: "Welcome" }.

Acceder a los datos dentro de los componentes

post.componente.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 {

  mymsg: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe((data) => {      this.mymsg = data.msg;    });  }}

En el componente anterior, primero importamos ActivatedRoute de @angular/router paquete y lo inyectó en el constructor PostComponent.

RouteEnabled: Esto nos ayuda a acceder a los datos de ruta cargados actualmente.

Al interior ngOnInit método, accedemos al objeto de datos suscribiéndolo y actualizando el mymsg
propiedad.

datos.msg donde msg La propiedad es la misma que tomamos para esta ruta.

Si quieres conocer otros artículos parecidos a Pasar datos a rutas en Angular puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas