Question

我正在设计网页，但是在实现视觉模型时遇到困难：

现在，我不担心第1节。我想要设计第2节。我的网站使用Angular 5和Bootstrap 3，以及ngx-bootstrap库，将Bootstrap组件添加到Angular。到目前为止，我有以下代码：

<div class="row"> <!-- Schedule / Budget Navbar-->
    <tabset type="pills">
      <tab heading="Schedule"></tab>
      <tab heading="Budget"></tab>
    </tabset>
</div>  
<div class="row"> <!-- Schedule / Budget Content -->
  <!-- <app-schedule/> OR <app-budget> -->
</div>

样式：

.nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-pills {
    text-align: center;
}

.nav-pills > li > a{
    color: black!important; 
}

.nav-pills > li > a.active{
    background-color: #424242!important;
    color: white!important; 
}

How it currently looks

但是我希望按钮的设计就像在模型中一样。我还希望导航栏后的第2部分根据选择的预算或时间表显示内容。我正在考虑为这两个功能中的每一个添加一个组件，并在元素<app-budget/>和<app-schedule/>之间动态更改，这些组件将分别附加到相应的组件上。

Answer 1

您应该使用路由。假设您同时拥有时间表和预算这两个组成部分，请在您的app.component中输入：

<div class="row"> <!-- Schedule / Budget Navbar-->
    <tabset type="pills">
      <a routerLink="/schedule"><tab heading="Schedule"></tab></a>
      <a routerLink="/budget"><tab heading="Budget"></tab></a>
    </tabset>
</div>  
<div class="row"> <!-- Schedule / Budget Content -->
  <router-outlet></router-outlet>
</div>

现在在您的app.module.ts中导入RouterModule并添加：

RouterModule.forRoot([
            { path: 'schedule', component: ScheduleComponent },
            { path: 'budget', component: BudgetComponent },
            { path: '', component: HomeComponent }
        ])

在imports数组中。

要在选择一个组件时对按钮进行样式设置，请查看RouterLinkActive。 https://angular.io/api/router/RouterLinkActive

官方文档：https://angular.io/tutorial/toh-pt5

如何设计具有动态内容的导航栏

1 个答案: