Angular 2オプションのルートパラメーター

Angular 2ルートにオプションのルートパラメーターを含めることは可能ですか？RouteConfigでAngular 1.x構文を試しましたが、以下のエラーを受け取りました：

"元の例外：パス" / user /：id？ "に"？ "が含まれていますが、これはルート構成では許可されていません。"

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

パラメータの有無にかかわらず、複数のルートを定義できます。

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

コンポーネントのオプションパラメータを処理します。

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

関連するgithubの問題も参照してください：https : //github.com/angular/angular/issues/3525

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

この方法では、パラメーターが追加されたときにコンポーネントが再レンダリングされません。

情報がオプションの場合は、クエリパラメータを使用することをお勧めします。

ルートパラメータまたはクエリパラメータ？

厳格な規則はありません。一般に、

経路パラメータを優先する

• 値は必須です。
• この値は、あるルートパスを別のルートパスと区別するために必要です。

クエリパラメータを優先する

• 値はオプションです。
• 値は複雑または多変量です。

https://angular.io/guide/router#optional-route-parametersから

ルートパスからパラメーターを取り出すだけです。

@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

Angular 4-オプションのパラメーターの順序に対処するソリューション：

これを行う：

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

productsとproducts/:idルートの名前はまったく同じであることに注意してください。Angular 4はproducts、パラメーターのないルートでも正しくフォローしますproducts/:id。パラメーターの場合は、フォローします。

ただし、非パラメータールートのパスには末尾にスラッシュがあってはproductsなりません。そうでない場合、angularは誤ってそれをパラメーターパスとして扱います。したがって、私の場合、製品の末尾にスラッシュがあり、機能しませんでした。

これをしないでください：

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

rerezzの答えはかなりいいですが、重大な欠陥が1つあります。これにより、UserコンポーネントはngOnInitメソッドを再実行します。

重い作業をそこで行い、ノンパラメトリックルートからパラメトリックルートに切り替えるときに再実行したくない場合は、問題が発生する可能性があります。これらの2つのルートは、オプションのurlパラメータを模倣するためのものですが、2つの個別のルートになることはありません。

これは私が問題を解決するために提案するものです：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

次に、パラメーターの処理を担当するロジックをUserWithParamコンポーネントに移動し、基本ロジックをコンポーネントに残しUserます。/ userから/ user / 123にUser::ngOnInit移動しても、何を実行しても二度と実行されません。

置くことを忘れないでください<router-outlet></router-outlet>でUserのテンプレート。

複数のルートエントリを追加することを提案するrerezzからの承認済みの回答を含め、ここで推奨される回答は正常に機能します。

ただし、コンポーネントは、ルートエントリ間、つまりパラメータ付きのルートエントリとパラメータなしのエントリとの間で変更されたときに再作成されます。

これを避けたい場合は、両方のルートに一致する独自のルートマッチャーを作成できます。

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

次に、ルート構成でマッチャーを使用します。

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

angular4では、ルートを階層にまとめる必要があるだけです

const appRoutes: Routes = [
  { 
    path: '', 
    component: MainPageComponent 
  },
  { 
    path: 'car/details', 
    component: CarDetailsComponent 
  },
  { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
  },
  { 
    path: 'car/details/:id', 
    component: CadDetailsComponent 
  },
  { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
  }
];

これは私にとってはうまくいきます。このようにして、ルータはオプションIDパラメータに基づいて次のルートを認識します。

この問題の別のインスタンスに遭遇し、その解決策を探す際にここに来ました。私の問題は、私が子供たちをやっていることと、コンポーネントの遅延読み込みも少し最適化することでした。つまり、親モジュールを遅延ロードする場合です。ルートで '/：id'を使用することが主なものでしたが、 '/'がその一部であるという不満があります。ここでは正確な問題ではありませんが、それは当てはまります。

親からのアプリルーティング

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...

子ルートの遅延読み込み

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...

コメントすることはできませんが、参照：Angular 2オプションのルートパラメーター

Angular 6のアップデート：

import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
  let paramId = route.params.pipe(map(p => p.id));

  if (paramId) {
    ...
  }
}

Angular6ルーティングの詳細については、https： //angular.io/api/router/ActivatedRouteを参照してください。

遅延読み込みで同様の問題に直面している私はこれを行いました：

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

そしてコンポーネントで：

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

こちらです：

• なしのルート/は、次のルートにリダイレクトされます。のため、そのpathMatch: 'full'ような特定の完全なルートのみがリダイレクトされます。

• その後、users/:id受け取ります。実際のルートがだったusers/場合idは""、それをチェックインし、それにngOnInit応じて行動します。それ以外の場合idはIDであり、続行します。

• 残りのコンポーネントの動作selectedUserは未定義であるか、未定義ではありません（* ngIfなど）。