異なるルート同じコンポーネント

Question

私はこのようなものを実現したい/productsはすべての製品を表示し、/products/:categoryは特定のカテゴリに関連するすべての製品を示します。私は、次のルートがあることを達成するために：

const productsRoutes: Routes = [ 
    { 
    path: 'products', 
    component: ProductsComponent, 
    children: [ 
     { 
     path: '', 
     component: ProductsListComponent, 
     }, 
     { 
     path: ':category', 
     component: ProductsListComponent 
     } 
    ] 
    } 
]; 

問題を

私はカテゴリを切り替え、私はすべての製品とカテゴリの製品、およびその逆、角度再描画を切り替える際にすべてが、大丈夫ですコンポーネントとちらつきがあります。

角度2ルータの最終版には、私が知る限り、正規表現がありません。私が紛失しているものがありますか？それともこれが唯一の解決策ですか？

Answer 1

これを行う別の方法があるかどうかわかりませんが、以下のハックを使用して動作させることができました。

export const productsRoutes: Route[] = [ 
    { 
     path: 'products', 
     component: ProductsComponent, 
     children: [ 
      { 
       path: '', 
       pathMatch: 'prefix', 
       component: ProductsListComponent, 
       children: [ 
        { 
         path: '', 
         component: EmptyComponent, 
        }, 
        { 
         path: ':category', 
         component: EmptyComponent, 
        }, 
       ], 
      }, 
     ], 
    }, 
]; 

EmptyComponent：ListComponent上

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'GemainEmpty', 
    template: '<router-outlet></router-outlet>', 
}) 
export class EmptyComponent { 
} 

ハンドルルート変更：

ngOnInit() { 
    this.routerEventsSubscription = this.router.events.subscribe((evt) => { 
     if (!(evt instanceof NavigationEnd)) { 
      return; 
     } 
     //Code to reload/filter list 
    } 
} 

そしてListComponentテンプレート上のルータのコンセントを追加します。

Answer 2

また、特定のパスにリダイレクトを定義することができます。

{ path: '**', redirectTo: '/home', pathMatch: 'full' }, 

/homeは、あなたがにリダイレクトするルートです。

path: '**'は

Answer 3

に定義されていないすべてのパスは、あなたがルート

const routes: Routes = [ 
    { path: 'experience', 
     children: [ 
      { path: 'pending', component: ExperienceComponent }, 
      { path: 'requests', component: ExperienceComponent }, 
     ] }] 

とExperienceComponentインポートで

import { ActivatedRoute } from "@angular/router"; 

と、コンストラクタでは、このパラメータ

を追加する追加することによって、それを解決することができます解決します

constructor(public route: ActivatedRoute) 

とコンストラクタGETのURLこのケースでは

this.route.url.subscribe(params => { 
    console.log(params[0].path); 
})