web-dev-qa-db-fra.com

Transmission de données via un routeur Angular2

J'ai un composant où je sélectionne un ensemble d'objets image. Je souhaite transmettre ces images sélectionnées à mon nouvel itinéraire, CreateAlbum. Les données imbriquées ne conviendraient pas comme paramètres d'URL.

Y a-t-il un moyen facile d'y parvenir?

Voici mon code pour naviguer vers l'itinéraire

  public gotoCreateAlbum(): void {
    this.router.navigate([('/create-album')])
  }

Les données sélectionnées sont dans cette variable

@Input() selectedPhotos: iPhoto[];

et ceci est mon module de routage

const routes: Routes = [
  { path: 'photos',  component: PhotosComponent},
  { path: 'photos/:filter', component: PhotosComponent},
  { path: 'create-album', component: CreateAlbumComponent}
];

En gros, je souhaite effectuer les mêmes opérations que si le composant CreateAlbum était un enfant de mon composant actuel, auquel cas j'aurais utilisé @Input ().

angulartypescriptrouting
18
user3642173

Voir https://angular.io/guide/router pour un exemple détaillé. Faites défiler jusqu'à l'extrait de code:

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}

Pour obtenir la valeur de 'id' dans le composant cible:

ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      // (+) before `params.get()` turns the string into a number
      this.selectedId = +params.get('id');
      return this.service.getHeroes();
    })
  );
}
9
Philip Beber

J'espère que ça va marcher. Essayez d'utiliser les paramètres de requête.

 <nav>
      <a [routerLink]="['/component1']">No param</a>
      <a [routerLink]="['/component2']" [queryParams]="{ page: 99 }">Go to Page 99</a>
 </nav>

ou

opencomponent2(pageNum) {
    this.router.navigate(['/component2'], { queryParams: { page: pageNum } });
  }

En composante enfant:

constructor(
    private route: ActivatedRoute,
    private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['page'] || 0;
      });
  }

J'ai étudié cela sur le site Web rangle.io. Essayez ceci si cela fonctionne pour vous. sinon https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service n'est qu'une option.

24
ammy

Sauf si vous souhaitez que les utilisateurs manipulent la chaîne de requête dans la barre d'adresse, effectuez un "atob" et un "btoa" avant l'envoi et après la réception des données. Juste un peu de sécurité

De plus, si vous ne souhaitez pas vous abonner, vous pouvez utiliser le paramètre Route snapshot comme suit (juste pour qu'il ne continue pas de se mettre à jour comme un observable, donc à moins que le composant ne soit ré-initié, il ne le sera pas. Obtenir la valeur mise à jour le cas échéant. Par conséquent, le gestionnaire d'événements ngOnInit est un bon endroit pour obtenir la valeur.

// before
this._router.navigate(["/welcome/" + atob(userName)]);

// after
ngOnInit() {
    this.userName = btoa(this.route.snapshot.params['userName']);
}
2
NitinSingh

Vous pouvez transmettre des données à l'aide d'un routeur, par exemple

{ path: 'form', component: FormComponent ,data :{data :'Test Data'} },

et votre composant

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

export class FormComponent {
    sub: any;
    constructor(private route: ActivatedRoute) { }
    ngOnInit() {
        this.sub = this.route
            .data
            .subscribe(value => console.log(value));
    }
}

Plus d'infos

Mais cela peut ne pas être la manière préférée, you can use parent child communication or make a service common and share data between them. Vérifiez les références ci-dessous pour le faire.

communication parent-enfant

Partager les données en utilisant le service

1
Prashobh
sender html

<a [routerLink]="['../../../print/attendance/',{data:userDetails | json}]">link</a>

receiver ts
ngOnInit() {
   this.route.params.subscribe(params=>
    {
      this.data=JSON.parse(params['data'])
    }
    );

  }
0
lotus