Truyền dữ liệu qua bộ định tuyến Angular2

Question

Tôi có một thành phần nơi tôi chọn một bộ đối tượng hình ảnh. Tôi muốn chuyển những hình ảnh đã chọn này sang tuyến mới của tôi, CreateAlbum. Dữ liệu được lồng vào và sẽ không phù hợp để truyền dưới dạng tham số URL.

Có cách nào dễ dàng để đạt được điều này không?

Dưới đây là mã của tôi để điều hướng đến con đường

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

Dữ liệu của tôi chọn ngồi trong biến

@Input() selectedPhotos: IPhoto[]; 

này và đây là module định tuyến của tôi

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

Về cơ bản tôi muốn thực hiện các thao tác tương tự như khi thành phần CreateAlbum là một phần tử con của thành phần hiện tại của tôi trong w hich trường hợp tôi đã sử dụng @Input()

Answer 1

Xem https://angular.io/guide/router cho một sâu ví dụ. Scroll down vào đoạn mã này:

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

Tôi hy vọng điều này sẽ hiệu quả. Thử sử dụng Tham số truy vấn.

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

hoặc

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

Trong thành phần con:

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

tôi đã nghiên cứu này trên trang web rangle.io. Hãy thử điều này nếu nó hoạt động cho bạn. nếu không, https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service là tùy chọn duy nhất.

Answer 3

Trừ khi bạn muốn người dùng thao tác chuỗi truy vấn trong thanh địa chỉ, hãy thực hiện "atob" và "btoa" trước khi gửi và sau khi nhận dữ liệu. Chỉ cần một chút bảo mật

Ngoài ra, nếu bạn không muốn có đăng ký, bạn có thể sử dụng tham số chụp nhanh lộ trình như sau (trừ khi nó không được cập nhật tái init, nó sẽ không thể nhận được giá trị được cập nhật nếu có. Do đó một nơi tốt để có được giá trị là trong trường hợp xử lý 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

Bạn có thể truyền dữ liệu sử dụng bộ định tuyến, ví dụ

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

và thành phần của bạn

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

Nhưng điều này có thể không phải là cách ưa thích, you can use parent child communication or make a service common and share data between them. Kiểm tra các tài liệu tham khảo bên dưới để thực hiện điều đó.

Parent child communication

Share data using service