Question

我只是在学习java和angular 2，在我的前端我有一个使用材料设计bootstrap（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，但是当一个新按钮放在{{ 1}}它会转到标签href=#documentos，但它没有标签documentos为已激活（标签docuemntos仍然有效）。

抱歉，我的英语很差，希望你能帮助我。

Answer 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

创建一个按钮，其中包含指向导航栏Angular2 Material-Design-bootstrap的链接

1 个答案: