☰

Angular ルーティングコンポーネントにデータを渡すにはどうすればいいですか? 質問する

tag-icon • tag-icon angular typescript
Angular ルーティングコンポーネントにデータを渡すにはどうすればいいですか? 質問する

私のAngular 2ルートのテンプレートの1つ（FirstComponent）にボタンがあります

最初のコンポーネント.html

<div class="button" click="routeWithData()">Pass data and route</div>

私の目標は以下の達成です:

ボタンをクリックすると、データを保持しながら、他のコンポーネントをディレクティブとして使用せずに、別のコンポーネントにルーティングされます。

私が試してみたのはこれです...

1番目のアプローチ

同じビューで、ユーザーの操作に基づいて同じデータを収集して保存しています。

最初のコンポーネント

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

通常、SecondComponentへのルーティングは

 this._router.navigate(['SecondComponent']);

最終的にデータを渡す

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

一方、パラメータ付きリンクの定義は次のようになります。

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

このアプローチの問題点は、複雑なデータ(たとえば、 property3 のようなオブジェクト) を URL 内で渡すことができないことです。

2番目のアプローチ

別の方法としては、FirstComponent にディレクティブとして SecondComponent を含めることです。

  <SecondComponent [p3]="property3"></SecondComponent>

ただし、そのコンポーネントを含めるのではなく、そのコンポーネントにルーティングしたいのです。

3番目のアプローチ

ここで私が考える最も実行可能な解決策は、サービス（例：FirstComponentService）を使用して

  • FirstComponentのrouteWithData()にデータ(_firstComponentService.storeData())を保存する
  • SecondComponentのngOnInit()でデータを取得する(_firstComponentService.retrieveData())

このアプローチは完全に実行可能であるように思われますが、これが目標を達成するための最も簡単かつエレガントな方法であるかどうかは疑問です。

一般的に、コンポーネント間でデータを渡すための他の潜在的なアプローチを見逃していないかどうかを知りたいのですが、特にコードの量が少ない場合です。

ベストアンサー1

アップデート 4.0.0

角度を見るAngular Router - ナビゲートする前にデータを取得する詳細については。

オリジナル

サービスを使用するのが最善の方法です。ルート パラメータでは、ブラウザーの URL バーに反映させたいデータのみを渡す必要があります。

角度を見るAngular クックブック コンポーネント通信 - 双方向サービス。

RC.4で出荷されたルータは、data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch: 'full'},
  {path: 'heroes', component: HeroDetailComponent, data: {some_data: 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

以下も参照プランカー。

おすすめ記事