Question

我正在构建一个Angular2应用程序并具有以下组件结构（每个项目都是一个单独的组件）。

-App
- Home
- Vehicles
-- BMW:
   - E46
   - E30
   - E92

-- Toyota
   - Corolla
   - Camry
   - Tundra

我的 routes.ts ：

export const routes: Routes = [
 { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'vehicles', component: VehiclesComponent, 

     children: [
        { path: 'bmw', component: BMWComponent, 
           children: [
             { path: 'e46', component: E46Component },
             { path: 'e30', component: E30Component },
             { path: 'e92', component: E92Component },
           ]
        },

        { path: 'toyota', component: ToyotaComponent, 
           children: [
             { path: 'corolla', component: CorollaComponent },
             { path: 'camry', component: CamryComponent },
             { path: 'tundra', component: TundraComponent },
           ]
        }

     ]

    }
];

每个组件都有一个结构：

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

@Component({
    selector: 'bla-bla-bla-section',
    templateUrl: 'bla-bla-bla.html',
    moduleId: module.id
})

export class BlaBlaBlaComponent { }

.html

<div class="bla-bla-bla">
   <router-outlet></router-outlet>
</div>

因此，车辆，宝马，丰田组件都有自己的路由器插座来渲染东西。

我的问题是当我在车辆页面上（显示宝马和丰田汽车列表时）点击任何项目，说＆＃34; E92＆＃34;，我在路由器插座中显示该项目一切都还可以，除了其余部分仍然显示之外（尽管URL如：localhost：8080 / vehicles / BMW / E92），因为VehiclesComponent.html里面有宝马和丰田的路由器插座

我只想要点击的项目出现在页面中。我应该更改/添加/ ...以解决问题？

Angular2路由器出口结构

0 个答案: