質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

1087閲覧

Angular Routerでchildrenを使ったときのURLパラメタの取得方法

ti1050

総合スコア14

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

1クリップ

投稿2019/02/17 15:40

質問

Angularを使ってSPAの構築にチャレンジしています。ルーティング用のモジュールの定義方法が大まかに把握できて、メンテナンス性の高いディレクトリ構造・モジュール分割方法を模索している段階です。

その過程で、childrenを使ってネストする方法や、loadChildrenを使ってLazyLoadingする方法を学びました。

さて、以下のようなルーティングを定義したときの:groupName:userIdの取得方法について困っています。

typescript

1import { NgModule } from '@angular/core'; 2import { Routes, RouterModule } from '@angular/router'; 3 4const routes: Routes = [ 5 { path: 'group/:groupName', children: [ 6 { path: 'user', children: [ 7 { path: '', loadChildren: './user-list/user-list.module#UserListPageModule' }, 8 { path: ':userId', loadChildren: './user-detail/user-detail.module#UserDetailPageModule' }]}]}, 9]; 10 11@NgModule({ 12 imports: [RouterModule.forRoot(routes)], 13 exports: [RouterModule] 14}) 15export class AppRoutingModule { }

UserDetailPage:groupName:userIdを利用しようとすると、以下のように:userIdthis.route.snapshot.paramMapから得ることができますが、:groupNameの方はthis.route.parent.parent.parent.snapshot.paramMapから取得する必要があります。

typescript

1import { Component } from '@angular/core'; 2import { ActivatedRoute } from '@angular/router'; 3 4@Component({ 5 selector: 'app-user-detail', 6 templateUrl: './user-detail.component.html', 7 styleUrls: ['./user-detail.component.scss'] 8}) 9export class UserDetailComponent { 10 11 // ここがわかりづらく、可能であれば改修したい 12 groupName = this.route.parent.parent.parent.snapshot.paramMap.get('groupName'); 13 userId = this.route.snapshot.paramMap.get('userId'); 14 15 constructor( 16 private route: ActivatedRoute, 17 ) { } 18 19}

各ページのコンポーネントがルーティング中での自身の階層の深さを知っている必要があり、実装面で綺麗ではないと思ってしまいました。URL中に含まれるパラメタをシンプルに取得する良い方法を教えていただきたいです。

今までWebアプリケーション開発はRuby on Railsで行なっており、パラメーターはコントローラー中であればどこでもparams[:group_name]のように取得することができていたので、そのように簡単にアクセスできたら扱いやすいと考えて質問させていただきました。

宜しくお願いいたします。

環境

  • Node.js v10.4.1
  • @angular/cli 7.3.1
  • Angular 7.2.5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Angular5.2ぐらいで導入されたparamsInheritanceStrategyalwaysにしてみてください。

Javascript

1imports: [RouterModule.forRoot(routes)], 23imports: [RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' })],

投稿2019/02/18 21:38

編集2019/02/20 22:31
xenbeat

総合スコア4258

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問