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

Question

У меня есть компонент, где я выбираю набор объектов изображения. Я хочу передать эти выбранные изображения на новый маршрут, 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 был дочерним элементом моего текущего компонента в w hich case я бы использовал @Input()

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

Answer 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 - только опция.

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

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

More info

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

Parent child communication

Share data using service