创建一个带有导航栏 Angular2 Material-Design-bootstrap 链接的按钮答案

【问题标题】：Create a button with a link to the nav bar Angular2 Material-Design-bootstrap创建一个带有导航栏 Angular2 Material-Design-bootstrap 链接的按钮
【发布时间】：2017-03-14 04:03:18
【问题描述】：

我只是在学习 java 和 angular 2，在我的前端我有一个使用材料设计引导程序 (http://fezvrasta.github.io/bootstrap-material-design/) 的导航，在我看来我有一个导航药丸

<ul class="nav nav-pills">
    <li class="active"><a data-toggle="tab" href="#formulario">Formulario</a>
    </li>
    <li><a data-toggle="tab" href="#documentos">Documentos</a>
    </li>
    <li><a data-toggle="tab" href="#flujo">Flujo</a>
    </li>
</ul>

<div class="tab-content">
    <!--      DOCUMENTOS     -->
    <div id="formulario" class="tab-pane fade in active">
        <!--      Here i have a dynamyc-form take from a json -->
    </div>

    <!--      DOCUMENTOS     -->
    <div id="documentos" class="tab-pane fade">
        <!--      fields to upload document -->
    </div>

    <!--      FLUJO  -->
    <div id="flujo" class="tab-pane fade">
        <!--      just a table with a list of activities  -->
    </div>
</div>

基本上这就是代码，问题是我试图在标签formulario 下方放置一个按钮，以将我带到下一个标签documentos，但是当将新按钮与href=#documentos 放在一起时，它会带我到标签 documentos 但它没有标签 docuemntos 处于活动状态（标签 documentos 仍然处于活动状态）。

对不起，我的英语不好，希望你能帮助我。

【问题讨论】：

标签： angular angular-ui-bootstrap href navbar

【解决方案1】：

也许你应该试试这个：Learning Angular 2: Conditionally add styles to an element

有点像这个例子

@Component({
  template: `
    <div>
      <div [class.active]="isActive('new_tab_name')">
        New Tab Name
      </div>
      <div [class.active]="isActive('tab_name')">
        Tab Name
      </div>          
      <button (click)="setActive('new_tab_name')">Toggle style</button>
    </div>
  `
})
class MyApp {

  tabName:string = 'tab_name';

  setActive(tab) {
    this.tabName = tab;
  }

  isActive(tab) {
    return this.tabName == tab;
  }
}

希望对你有帮助。

编辑。

或者，您只需将 javascript 文件添加到 angular-cli，例如：Global Library Installation

【讨论】：