Передача данных через маршрутизатор Angular2

У меня есть компонент, где я выбираю набор объектов изображения. Я хочу передать эти выбранные изображения на новый маршрут, CreateAlbum. Данные, которые он вложил и не были бы подходящими для передачи в качестве параметров URL.

Есть ли простой способ достичь этого?

Здесь мой код для перехода к маршруту

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

Мои выбранные данные находятся в этой переменной

@Input() selectedPhotos: IPhoto[];

и это мой модуль маршрутизации

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

В принципе, я хочу выполнять те же операции, что и компонент CreateAlbum был дочерним по отношению к моему текущему компоненту, и в этом случае я бы использовал @Input()

Ответ 1

См. Https://angular.io/guide/router для подробного примера. Прокрутите вниз к этому фрагменту кода:

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

Чтобы получить значение "id" в целевом компоненте:

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

Я надеюсь, что это сработает. Попробуйте использовать параметры запроса.

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

В дочернем компоненте:

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

Я изучил это на сайте rangle.io. Попробуйте, если это сработает для вас. иначе https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service - это только вариант.

Ответ 3

Если вы не хотите, чтобы пользователи манипулировали строкой запроса в адресной строке, делайте "atob" и "btoa" перед отправкой и после получения данных. Немного безопасность

Кроме того, если вы не хотите иметь подписку, вы можете использовать параметр моментального снимка маршрута следующим образом (просто чтобы он не обновлялся как наблюдаемый, поэтому, если компонент не перезагружается, он выиграл 't получать обновленное значение, если оно есть. Следовательно, хорошее место для получения значения находится в обработчике событий ngOnInit

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

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

Ответ 4

Вы можете передавать данные с помощью маршрутизатора, например

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

и ваш компонент

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

Дополнительная информация

Но это может быть не самый предпочтительный способ, you can use parent child communication or make a service common and share data between them. Проверьте ниже ссылки для этого.

Передача родительского ребенка

Совместное использование данных с помощью службы

Ответ 5

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

Ответ 6

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

  }