Posterior a investigar con especialistas en la materia, programadores de deferentes ramas y maestros hemos dado con la solución al dilema y la compartimos en este post.

Solución:

¡¡Oh!! puede ser que llego demasiado tarde para responder a la pregunta! Pero no importa. Esto podría ayudarlo a usted o a otros a compartir datos entre componentes que usan el enrutador, el servicio compartido y el objeto compartido que se usa dentro del servicio compartido. Espero que esto seguramente ayude.

Responder

Arranque.ts

import Component,bind from 'angular2/core';

import bootstrap from 'angular2/platform/browser';

import Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS from 'angular2/router';

import SharedService from 'src/sharedService';

    import ComponentFirst from 'src/cone';
import ComponentTwo from 'src/ctwo';


@Component(
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
    

      Home
    
 

    
      `,

)

@RouteConfig([
  path:'/component-first', name: 'ComponentFirst', component: ComponentFirst
  path:'/component-two', name: 'ComponentTwo', component: ComponentTwo

])

export class AppComponent implements OnInit 

  constructor(router:Router)
  
    this.router=router;
  

    ngOnInit() 
    console.log('ngOnInit'); 
    this.router.navigate(['/ComponentFirst']);
  





    bootstrap(AppComponent, [SharedService,
    ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
    ]);

PrimerComponente

import Component,View,bind from 'angular2/core';
import SharedService from 'src/sharedService';
import Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS from 'angular2/router';
@Component(
  //selector: 'f',
  template: `
    

    Send
      `,

)

export class ComponentFirst   

  constructor(service:SharedService,router:Router)
    this.service=service;
    this.router=router;
  

  send(str)
    console.log(str);
    this.service.saveData(str); 
    console.log('str');
    this.router.navigate(['/ComponentTwo']);
  

Segundo componente

import Component,View,bind from 'angular2/core';
import SharedService from 'src/sharedService';
import Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS from 'angular2/router';
@Component(
  //selector: 'f',
  template: `
    
myName
    Back
      `,

)

export class ComponentTwo   

  constructor(router:Router,service:SharedService)
  
    this.router=router;
    this.service=service;
    console.log('cone called');
    this.myName=service.getData();
  
  back()
  
     console.log('Back called');
    this.router.navigate(['/ComponentFirst']);
  

SharedService y objeto compartido

import Component, Injectable,Input,Output,EventEmitter from 'angular2/core'

// Name Service
export interface myData 
   name:string;




@Injectable()
export class SharedService 
  sharingData: myData=name:"nyks";
  saveData(str)
    console.log('save data function called' + str + this.sharingData.name);
    this.sharingData.name=str; 
  
  getData:string()
  
    console.log('get data function called');
    return this.sharingData.name;
  
 

Todo lo que tiene que hacer es crear un servicio, inyectarlo en ambos componentes, asignar el valor de entrada al servicio verificable y acceder a él en el otro componente. Lo siento hermano, pero no sé cómo crear plunker. Aquí está el código:

EDITAR:

Primero haga este servicio de datos:

export class DataService
     dataFromService;

Luego inyecte esto en su primer componente:

import Component,View from 'angular2/core';
import Router from 'angular2/router';
import DataService from 'path/to/dataservice';

@Component(
templateUrl: 'home/home.html'
)


export class AppComponent 
 toDoModel;
 constructor(private _router:Router, public dataService : DataService) 




 onclck(inputValue)
  alert(inputValue)
  this.dataService.dataFromService = inputValue;
  this._router.navigate(['Second']);
 

Luego inyecte otro componente y acceda al valor:

import Component,View from 'angular2/core';
import DataService from 'path/to/dataservice';
export secondComponent{
   constructor(public dataService : DataService)
   console.log(this.dataService.dataFromService);

Te mostramos las comentarios y valoraciones de los lectores

Eres capaz de añadir valor a nuestra información añadiendo tu experiencia en las críticas.

---

---

Utiliza Nuestro Buscador