奇妙なルータの動作

Question

は、私は次のようなルーティングモジュールを持っています。

/explorer/1に移動するとエラーが発生するというのは奇妙なことです。 しかし、/explorer/1/detailsに移動すれば、すべてうまく動作します。

/explorer/IDに行ったときにエクスプローラを表示し、/explorer/ID/detailsに行ったときにエンティティの詳細をお伝えしたいと思います。

これはエラーです：（それは/explorer/IDを認識しないようにそれはそう）

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined 
TypeError: Cannot read property 'routes' of undefined 
    at getChildConfig (http://localhost:4200/main.bundle.js:61682:35) 
    at Recognizer.processSegmentAgainstRoute (http://localhost:4200/main.bundle.js:61648:27) 

Answer 1

お使いのルータの設定は、より次のようになります。あなたは今URL /explorerに移動した場合

RouterModule.forChild([{ 
    path: '', 
    component: HomeComponent, 
    children: [ 
     { path: '', redirectTo: 'explorer' },    
     { 
      path: 'explorer',     
      component: AnotherComponentWithARouterOutlet, 
      children: [ 
       { 
        path: '', 
        redirectTo: '0', 
       }, 
       { 
        path: ':id', 
        component: EntitiesExplorerComponent, 
        children: [ 
         { path: '', redirectTo: 'details' }, 
         { path: 'details', component: EntityDetailsComponent } 
        ], 
       }, 
      ]     
     }, 
    ] 
}, 

ルータは/explorer/0ルートに自動的にリダイレクトされます。

explorerルートの別のコンポーネントを作成する必要があります。このコンポーネントには、子をロードするためのテンプレートに<router-outlet></router-outlet>が含まれている必要があります。子供はidsです。ルートにidが指定されていない場合、ルータは0にリダイレクトします。

しかし、:idルートは、router-outletを持つEntitiesExplorerComponentを持っています。ルータは、このコンセントに何をロードする必要があるかを知りたいと考えます。したがって、子供のための空のルートを:idと定義する必要があります。上の私の例では、ちょうどdetailsにリダイレクトされました。これを望まない場合は、この'' -emptyルートの別のコンポーネントを作成する必要があります。このコンポーネントには、Click here to go to the detailsなどのようなボタンがあります。