javascript - navigationend - router events subscribe angular 4

Angular 2: ¿paso de datos a rutas?

Question

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

Hay 2 componentes. es decir, PagesComponent y DesignerComponent .

Quiero navegar de PagesComponent a DesignerComponent.

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

Intenté usar RouteParams pero su objeto de la página getting undefined .

a continuación está 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 DesignerComponent, he hecho lo siguiente:

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

Hasta el momento, su enrutamiento es correcto para el diseñador, pero cuando intento acceder a la page Objeto en el diseñador, se muestra undefined . Alguna solución?

Answer 1

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 los parámetros 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''];
}
}

Answer 2

No puede pasar objetos utilizando parámetros de enrutador, solo cadenas porque debe reflejarse en la URL. Sería probablemente un mejor enfoque para 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.

Actualizar

data se volvieron a introducir en RC.4 ¿Cómo paso los datos en los componentes de Angular 2 cuando uso el enrutamiento?

Answer 3

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 anterior, deseo enviar datos a través de una ruta de ejemplos de tubería a PowerBoosterComponent. Así que ahora puedo recibir estos datos en PowerBoosterComponent de esta manera:

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'']);
}
}

Para que pueda obtener los datos por this.route.snapshot.data[''name''] .