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で実行します私は@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」を実行します。ちょっとだけ セキュリティ

また、あなたがサブスクリプションを持っていない場合は、次のようにRouteスナップショットパラメータを使用できます（コンポーネントが取得しない限りもしあれば再初期化、それが値を更新取得されません。したがって、値を取得するには良い場所は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