Estoy trabajando en este proyecto de angular2 en el que estoy usando ROUTER_DIRECTIVES
para navegar de un componente a otro.
Hay 2 componentes. es decir, PagesComponent
& DesignerComponent
.
Quiero navegar de PagesComponent a DesignerComponent.
Hasta ahora su enrutamiento correctamente, pero tenía que pasar página
Objeto por lo que el diseñador puede cargar ese objeto de la página en sí mismo.
Traté de usar RouteParams Pero su obtención de la página objeto undefined
.
A continuación es mi código:
pages.component.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 de 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 página
Objeto en el diseñador entonces su mostrando undefined
.
¿Alguna solución?
No se pueden pasar objetos utilizando los parámetros del enrutador, sólo cadenas, ya que deben reflejarse en la URL. De todos modos, sería mejor utilizar un servicio compartido para pasar datos entre los componentes enrutados.
El antiguo enrutador permite pasar datos
pero el nuevo enrutador (RC.1
) todavía no.
Actualización
data
ha sido reintroducido en RC.4
https://stackoverflow.com/questions/36835123/how-do-i-pass-data-in-angular-2-components-while-using-routing
Cambia en angular 2.1.0
En something.module.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 params en el componente de edición
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'];
}
}
Puedes hacerlo:
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 de arriba, quiero enviar datos a través de una ruta pipeexamples a PowerBoosterComponent.So ahora puedo recibir estos datos en PowerBoosterComponent como este:
power-booster-component.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í puedes obtener los datos por this.route.snapshot.data['name']
.