Angular2 router outlet structure

Question

I am building up an Angular2 app and have the following components structure (each item is a separate component).

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

-- Toyota
   - Corolla
   - Camry
   - Tundra

My 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 },
           ]
        }

     ]

    }
];

Each component has a structure:

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

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

export class BlaBlaBlaComponent { }

And .html

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

So, Vehicles, BMW, Toyota Components have their own router-outlets to render stuff.

My problem is when I am on the Vehicles page (where both BMW and Toyota cars list are shown) click on any item, say "E92", I got that item rendered in the router-outlet and everything's OK, apart of the fact that the rest is still shown (though the URL is like: localhost:8080/vehicles/BMW/E92), because the VehiclesComponent.html has router-outlets both for BMW and Toyota inside.

And I want only the item that has been clicked to appear in the page. What should I change / add / ... to solve the issue?