2017-10-30 11 views
0

Main Navigation ImageAngular2 +トップレベルナビゲーション - アクティブに経路エラー

は、私は、メニュー(メインナビゲーション画像)を持っているとにより異なるページレイアウトへのリンク異なる親を持っている(すべての「サイト」全幅がされている):

  1. ホーム - /ホーム
  2. の観光名所 - /サイト/名所
  3. 動物 - /サイト/動物
  4. トラック受注 - /オーダー/オーダー追跡
  5. アップロード注文 - /サイト/アップロード次
  6. 保存されたバスケット - /バスケット/保存されたバスケット
  7. ダウンロード2017 - 会社概要/サイト/ダウンロード
  8. - /サイト/について、私たち
  9. 問い合わせ - /サイト/連絡先「注文」親ビューが、エラーに「サイト」から行く場合、私は「サイト」をサイトとして期待されている「サイト」へ行くときのルートが働く

は、このように満足していないアクティブになります。

機能ごとにルーティングとモジュールを作成し、すべての「サイト」ルートをそれぞれのセクションに分けましたが、「エラー:既にアクティブになっているコンセントをアクティブにできません」という同じエラーが表示されました。

私はそれを設定するとき、私はミスを犯した場合には、別のルーティングモジュールに分離し、再びこのプロセスをしようとします、しかし、私はチェックしたい:

私が正しくつまり親を混合の親/子」を使用していた場合事実のレイアウトのためにメインナビゲーション内の子リンクが異なる場合、サイトは「ページ」ですか?私はこれを行う他のナビゲーションの例を見つけることができません。

app.component.html

<router-outlet></router-outlet> 

site.component.html(プロジェクトごとにルートとして)

<app-nav></app-nav> 
    <div class="container main-content"> 
     <div class="row"> 
     <div class="col-12"> 
      <router-outlet name="tertiary"></router-outlet> 
     </div> 
    </div> 
    </div> 
<app-footer></app-footer> 

app.routes.ts

const routes: Routes = [ 
 
    { 
 
    path: 'auth', 
 
    component: AuthComponent, 
 
    children: [ 
 
     { 
 
     path: 'login', 
 
     outlet: 'primary', 
 
     component: LoginComponent, 
 
     }, 
 
     { 
 
     path: 'register', 
 
     outlet: 'primary', 
 
     component: RegisterComponent, 
 
     }, 
 
     { 
 
     path: '', 
 
     redirectTo: 'login', 
 
     pathMatch: 'full' 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    path: 'home', 
 
    component: HomeComponent, 
 
    canActivate: [AuthGuard], 
 
    children: [ 
 
     { 
 
     path: '', 
 
     outlet: 'primary', 
 
     component: CatalogueComponent, 
 
     }, 
 
     { 
 
     path: '', 
 
     outlet: 'sidebar', 
 
     component: CatalogueNavComponent, 
 
     }, 
 
     { 
 
     path: 'products', 
 
     outlet: 'primary', 
 
     component: ProductsListComponent, 
 
     }, 
 
     { 
 
     path: 'products/category/:cat', 
 
     outlet: 'primary', 
 
     component: ProductsListComponent, 
 
     }, 
 
     { 
 
     path: 'products/detail/:code', 
 
     outlet: 'primary', 
 
     component: ProductdetailComponent, 
 
     }, 
 
     { 
 
     path: 'products/search/:variables', 
 
     outlet: 'primary', 
 
     component: SearchProductsComponent, 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    path: 'basket', 
 
    component: BasketComponent, 
 
    canActivate: [AuthGuard], 
 
    children: [ 
 
     { 
 
     path: 'basket-detail', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: BasketdetailComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: BasketTotalComponent, 
 
      }, 
 
     ], 
 
     }, 
 
     { 
 
     path: 'checkout', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: CheckoutComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: AddressComponent, 
 
      }, 
 
     ], 
 
     }, 
 
     { 
 
     path: 'stored-basket', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: StoredBasketComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: SearchBasketTemplatesComponent, 
 
      }, 
 
     ], 
 
     }, 
 
     { 
 
     path: 'stored-basket-detail/:basketId', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: StoredBasketDetailComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: StoredBasketDetailSummaryComponent, 
 
      }, 
 
     ], 
 
     }, 
 
     { 
 
     path: 'your-account', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: YourAccountComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: AddressComponent, 
 
      }, 
 
     ], 
 
     }, 
 
    ] 
 
    }, 
 
    { 
 
    path: 'order', 
 
    component: BasketComponent, 
 
    canActivate: [AuthGuard], 
 
    children: [ 
 
     { 
 
     path: 'order-tracking', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: OrderTrackingComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: SearchOrderTrackingComponent, 
 
      }, 
 
     ], 
 
     }, 
 
     { 
 
     path: 'order-tracking-detail/:orderNo', 
 
     children: [ 
 
      { 
 
      path: '', 
 
      outlet: 'primary', 
 
      component: OrderTrackingDetailComponent, 
 
      }, 
 
      { 
 
      path: '', 
 
      outlet: 'sidebar', 
 
      component: OrderTrackingDetailAddressComponent, 
 
      }, 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    path: 'site', 
 
    component: SiteComponent, 
 
    children: [ 
 
    { 
 
     path: 'contact', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: ContactComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'upload-order', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: UploadOrderComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'about-us', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: AboutComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'attraction', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: AttractionComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'animals', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: AnimalsComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'downloads', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: DownloadsComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'order-tracking-pdf/:orderNo', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: OrderTrackingPdfComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'order-confirmation/:orderNo', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: OrderConfirmationComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    { 
 
     path: 'account-summary-pdf', 
 
     children: [ 
 
     { 
 
      path: '', 
 
      outlet: 'tertiary', 
 
      component: AccountSummaryPdfComponent, 
 
     }, 
 
     ], 
 
    }, 
 
    ], 
 
    }, 
 
    { 
 
    path: '', 
 
    canActivate: [AuthGuard], 
 
    redirectTo: 'home', 
 
    pathMatch: 'full' 
 
    }, 
 
    { 
 
    path: '**', 
 
    redirectTo: 'home' 
 
    } 
 
]; 
 

 

 
export const RoutingModule = RouterModule.forRoot(routes, { 
 

 
});

+0

を使用するために、サイトのルート定義を変更するのでしょうか? – LLai

答えて

0

問題を再現できました。それは角度のように見えますが、補助的なルータ - アウトレットを持つ前にプライマリルータ - アウトレットを持つ必要があります。あなたは、ルートの定義を投稿することができ、私はあなたのsite.component.htmlから

// site.component.html 
<app-nav></app-nav> 
<div class="container main-content"> 
    <div class="row"> 
     <div class="col-12"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div> 
<app-footer></app-footer> 

をルータ・アウトレット名を削除し、outlet: 'primary'

+0

@playboxdesignまた、基本的には使用されないであろう第三の補助ルータ - コンセントの隣に、ダミーのを追加することもできます。 – LLai

関連する問題