Passing data through Angular2 router

问题

I have a component where I select a set of image objects. I want to pass these selected images to my new route, CreateAlbum. The data it nested and wouldn't be suitable to pass as URL parameters.

Is there any easy way to achieve this?

Here's my code to navigate to the route

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

My selected data sits in this variable

@Input() selectedPhotos: IPhoto[];

and this is my routing module

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

Basically I want to perform the same operations as if the CreateAlbum component was a child to my current component in which case I would have used @Input()

回答1:

See https://angular.io/guide/router for an in-depth example. Scroll down to this code snippet:

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

To get the value of 'id' in the target component:

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

回答2:

I hope this will work. Try using Query Parameters.

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

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

In child component :

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

I have studied this on rangle.io website. Try this if it works for you. otherwise https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service is only option.

回答3:

Unless you want users to manipulate the query string in the addressbar, do a "atob" and "btoa" before sending and after receiving the data. Just a little security

Also, if you don't want to have a subscription, you can use the Route snapshot param as follows (just that it doesn't keep on updating like an observable, so unless the component gets re-init, it won't be getting updated value if any. Hence a good place to get the value is in the ngOnInit event handler

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

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

回答4:

You can pass data using router, for example

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

and your component

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

More info

But this may not be the preferred way, you can use parent child communication or make a service common and share data between them. Check below references for doing that.

Parent child communication

Share data using service

回答5:

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

  }

回答6:

this.router.navigate(['path', { flag: "1"}]);

来源：https://stackoverflow.com/questions/41039870/passing-data-through-angular2-router

标签

angular

typescript

routing