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

【问题标题】：Creating Tabs and calling sub-components with Bulma and Angular 5使用 Bulma 和 Angular 5 创建选项卡和调用子组件
【发布时间】：2018-06-13 03:58:51
【问题描述】：

我想创建一个带有标签的导航面板，我正在使用 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>

【问题讨论】：

那么你的问题是什么？

标签： javascript css angular typescript bulma

【解决方案1】：

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

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

当你使用路由组件时，就像文档中的这个。

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

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

当路径匹配英雄时，组件将被加载到路由器出口。我建议阅读路由文档并遵循它。

【讨论】：

【解决方案2】：

使用路由器非常简单。看看https://angular.io/guide/router。

【讨论】：