web-dev-qa-db-ja.com

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（）を使用します。

angulartypescriptrouting
18
user3642173

詳細な例については、 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();
    })
  );
}
9
Philip Beber

これがうまくいくことを願っています。クエリパラメータを使用してみてください。

 <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 は唯一のオプションです。

24
ammy

ユーザーがアドレスバーのクエリ文字列を操作することを望まない限り、データの送信前と受信後に「atob」と「btoa」を実行します。ほんの少しのセキュリティ

また、サブスクリプションが必要ない場合は、次のようにRouteスナップショットパラメーターを使用できます（観測可能なように更新を継続しないため、コンポーネントが再初期化されない限り、更新された値がある場合は取得します。したがって、値を取得するのに適した場所はngOnInitイベントハンドラーです。

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

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

たとえば、ルーターを使用してデータを渡すことができます

{ 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。それを行うには、以下の参照を確認してください。

親子通信

サービスを使用してデータを共有する

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

  }
0
lotus