web-dev-qa-db-fra.com

Angular 2: Passage de données aux itinéraires?

Je travaille sur ce projet angular2 dans lequel j'utilise ROUTER_DIRECTIVES pour naviguer d'un composant à l'autre.

Il y a 2 composants. c'est-à-dire PagesComponent & DesignerComponent.

Je souhaite naviguer de PagesComponent à DesignerComponent.

Jusqu'à présent, son routage était correct mais je devais passer page Object afin que le concepteur puisse charger cet objet de page en lui-même.

J'ai essayé d'utiliser RouteParams Mais son objet de page d'obtention undefined.

ci-dessous est mon code:

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() { }   
}

Dans le html, je fais ce qui suit:

<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>

Dans le constructeur DesignerComponent, j'ai effectué les opérations suivantes:

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

Jusqu'à présent, son acheminement correct vers le concepteur, mais lorsque j'essaie d'accéder à page Objet dans le concepteur, il affiche ensuite undefined. Des solutions?

javascripttypescriptangularangular2-routing
33
Bhushan Gadekar

Vous ne pouvez pas transmettre d'objets à l'aide de paramètres de routeur, mais uniquement de chaînes, car elles doivent être reflétées dans l'URL. Il serait probablement préférable d’utiliser un service partagé pour transférer les données entre les composants routés.

L'ancien routeur permet de passer data mais pas le nouveau routeur (RC.1).

Mettre à jour

data a été réintroduit dans RC.4Comment puis-je transmettre des données dans Angular 2 composants lors de l'utilisation du routage?

18
Günter Zöchbauer

Cela change dans angular 2.1.0

Dans quelque chose.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 { }

Pour obtenir les données ou les paramètres dans le composant d'édition

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

  }
}
16
Veerendra Borra

Tu peux le faire:

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 {}

Dans la voie ci-dessus, je souhaite envoyer des données via un chemin pipeexamples à PowerBoosterComponent.A présent, je peux recevoir ces données dans PowerBoosterComponent comme ceci:

power-booster-composant.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']);
  }
}

Vous pouvez donc obtenir les données par this.route.snapshot.data['name'].

1
Shubham Verma

1. Configurez vos itinéraires pour accepter les données

{
    path: 'some-route',
    loadChildren: 
      () => import(
        './some-component/some-component.module'
      ).then(
        m => m.SomeComponentModule
      ),
    data: {
      key: 'value',
      ...
    },
}

2. Accédez à route:

De HTML:

<a [routerLink]=['/some-component', { key: 'value', ... }> ... </a>

Ou de TypeScript:

import {Router} from '@angular/router';

...

 this.router.navigate(
    [
       '/some-component',
       {
          key: 'value',
          ...
       }
    ]
 );

. Obtenir les données de la route

import {ActivatedRoute} from '@angular/router';

...

this.value = this.route.snapshot.params['key'];
0
jrquick