Angular 2: ¿Pasar datos a Rutas?

Estoy trabajando en este proyecto angular2 en el que estoy usando ROUTER_DIRECTIVES para navegar de un componente a otro.

Hay 2 componentes. i. e.PagesComponent & DesignerComponent.

Quiero navegar de PagesComponent a DesignerComponent.

Hasta ahora su enrutamiento correctamente, pero necesitaba pasar page Objeto para que el diseñador pueda cargar ese objeto de página en sí mismo.

He intentado usar routeParams Pero su objeto getting page undefined.

A continuación está mi código:

Páginas.componente.ts 

import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { DesignerComponent } from './../../designer/designer.component';
import {RouteParams} from 'angular2/router';

@Component({
    selector: 'pages',    
    directives:[ROUTER_DIRECTIVES,],
    templateUrl: 'app/project-manager/pages/pages.component.html'
})
@RouteConfig([
  { path: '/',name: 'Designer',component: DesignerComponent }      
])

export class PagesComponent implements OnInit {
@Input() pages:any;
public selectedWorkspace:any;    
constructor(private globalObjectsService:GlobalObjectsService) {
    this.selectedWorkspace=this.globalObjectsService.selectedWorkspace;                    
}
ngOnInit() { }   
}

En el html, estoy haciendo lo siguiente: 

<scrollable height="300" class="list-group" style="overflow-y: auto; width: auto; height: 200px;" *ngFor="#page of pages">
    {{page.name}}<a [routerLink]="['Designer',{page: page}]" title="Page Designer"><i class="fa fa-edit"></i></a>
</scrollable>

En el constructor DesignerComponent he hecho lo siguiente: 

constructor(params: RouteParams) {
    this.page = params.get('page');
    console.log(this.page);//undefined
}

Hasta ahora su enrutamiento correctamente al diseñador, pero cuando estoy tratando de acceder a page Objeto en diseñador entonces se muestra undefined. Alguna solución?

Author: Bhushan Gadekar, 2016-05-11
Source

3 answers

No puede pasar objetos usando parámetros de enrutador, solo cadenas porque necesita reflejarse en la URL. Probablemente sería un mejor enfoque usar un servicio compartido para pasar datos entre componentes enrutados de todos modos.

El enrutador antiguo permite pasar data pero el nuevo enrutador (RC.1) todavía no.

Update

data fue reintroducido en RC.4 ¿Cómo paso datos en los componentes de Angular 2 mientras uso el enrutamiento?

 15
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:35

Cambia en angular 2.1.0

En algo.módulo.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlogComponent } from './blog.component';
import { AddComponent } from './add/add.component';
import { EditComponent } from './edit/edit.component';
import { RouterModule } from '@angular/router';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
const routes = [
  {
    path: '',
    component: BlogComponent
  },
  {
    path: 'add',
    component: AddComponent
  },
  {
    path: 'edit/:id',
    component: EditComponent,
    data: {
      type: 'edit'
    }
  }

];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    MaterialModule.forRoot(),
    FormsModule
  ],
  declarations: [BlogComponent, EditComponent, AddComponent]
})
export class BlogModule { }

Para obtener los datos o parámetros en el componente editar

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params, Data } from '@angular/router';
@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router

  ) { }
  ngOnInit() {

    this.route.snapshot.params['id'];
    this.route.snapshot.data['type'];

  }
}
 13
Author: Veerendra Borra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-29 08:43:23

Puedes hacer esto:

App-routing-modules.ts: 

import { NgModule                  }    from '@angular/core';
import { RouterModule, Routes      }    from '@angular/router';
import { PowerBoosterComponent     }    from './component/power-booster.component';


export const routes: Routes = [
  { path:  'pipeexamples',component: PowerBoosterComponent, 
data:{  name:'shubham' } },
    ];
    @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule {}

En esta ruta anterior, quiero enviar datos a través de una ruta pipeexamples a PowerBoosterComponent.So ahora puedo recibir estos datos en PowerBoosterComponent así:

Componente de refuerzo de potencia.ts 

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params, Data } from '@angular/router';

@Component({
  selector: 'power-booster',
  template: `
    <h2>Power Booster</h2>`
})

export class PowerBoosterComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router

  ) { }
  ngOnInit() {
    //this.route.snapshot.data['name']
    console.log("Data via params: ",this.route.snapshot.data['name']);
  }
}

Así que puedes obtener los datos por this.route.snapshot.data['name'].

 2
Author: Shubham Verma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-02 07:55:11