datos - pasar parametros entre componentes angular 4

¿Cómo puedo pasar correctamente el estado al clic posterior de mis componentes?

Question

Tengo un escenario simple.

Estoy registrando un componente en mi configuración de la aplicación Angular2.module.

routes = [ 
{ path: "/home", component: HomeComponent, data : { info : "hello world" }];

Ahora, ¿quiero llamar a la misma página pasando una versión variable de información con un valor diferente basado en algunas condiciones para que pueda animar a la izquierda oa la derecha? Probé muchas cosas, entre ellas las siguientes, ninguna de las cuales me ha funcionado.

router.navigate(["/home", {info : "hello again" }]);

Después de una inspección más profunda, noté que los datos en la ruta son únicamente para información estática, lo que pone un poco de valor en mis planes. La idea es que cuando hago clic en el botón Atrás puedo pasar algunos datos en el clic de todas las páginas, lo que establece una bandera para usar la animación posterior en lugar de la animación hacia adelante que tiene una transición hacia la izquierda o hacia la derecha.

Esto me deja con solo algunas consideraciones que incluyen ninguna que me parezca atractiva. Duplicar las definiciones de ruta, "¡no hay forma!" guarda para pasar una variable a cada componente, "¡casi no va al territorio!". El último que intentaba evitar es una variable global. No veo ninguna solución elegante de lo contrario. Estoy seguro de que están ahí afuera, pero actualmente me siento cegado.

Answer 1

Puede usar Enrutador y Ruteo Activado para comunicar datos entre 2 componentes.

La persona que llama hará lo siguiente:

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

@Component({
  selector: ''caller-component''
})
export class CallerComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

  }

  navigate(){
    //called when a specific link is clicked in the template
    let extraData: NavigationExtras = {
      queryParams: {
        "prop1": "Hello Home!",
        "prop2": "I am back"
      }
    };
    this.router.navigate([''/home''], extraData);

  }

}

Luego, su componente de origen deberá aprender a interceptar esos parámetros:

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

@Component({
  selector: ''home-component''
})
export class HomeComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.params.subscribe(params => {
      //Do something here with the values you receive
      console.log(params.prop1);
      console.log(params.prop2);
    });
  }

}