使用Bulma和Angular 5创建选项卡并调用子组件

Question

I want to create a navigation panel with tabs, I'm using Bulma, I'll show an example from the documentation. I'm using routing for the navigation of the project, but from my Matches component, I want to call a subcomponent from each tab.

 <div class="tabs">
       <ul>
        <li class="is-active"><a>Upcoming</a></li>
        <li><a>Past</a></li>
      </ul>
    </div>

Working like this: From the matches component call a subcomponent app-upcoming and app-past

 <div class="upcoming">
     <app-upcoming></app-upcoming>
    </div>
    <div class="past">
     <app-past></app-past>
   </div>

Answer 1

Use the router-outlet to specify where to display the route components:

https://angular.io/tutorial/toh-pt5#add-routeroutlet

When you use a route component, like this from the documentation.

import { HeroesComponent }      from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

The component will get loaded into the router-outlet when the path matches heroes. I'd recommend reading the routing documentation and following it along.

Answer 2

It is super easy you just go with router. Take a look of https://angular.io/guide/router .