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

Question

我想创建一个带有选项卡的导航面板，我正在使用 Bulma，我将展示文档中的示例。我正在使用路由来导航元素，但我想从我的 Matches 组件中调用每个选项卡的子组件。

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

工作是这样的:从匹配组件调用子组件 app-upcoming 和 app-past

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

Answer 1

使用 router-outlet 指定路由组件的显示位置:

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

当您使用路由组件时，就像文档中这样。

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

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

当路径匹配 heroes 时，组件将被加载到 router-outlet 中。我建议阅读路由文档并遵循它。