当他处于活动状态时添加/删除类路由 Angular 2答案

【问题标题】：Add/remove class routing when he was active Angular 2当他处于活动状态时添加/删除类路由 Angular 2
【发布时间】：2017-10-05 15:46:58
【问题描述】：

当我在另一个组件中更改路由时，我想将完成的类添加到路由中：例如：我在step1(component)中点击navbar路由组件step1中的“go to step 2”接收类done

我的 navbar.html（组件）

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"  class="step"><a [routerLink]="['step1']">
          <h4 class="list-group-item-heading">Miejsce i data</h4>
        </a></li>
        <li routerLinkActive="active" class="step disabled"><a [routerLink]="['step1']">
          <h4 class="list-group-item-heading">Wybierz samochód</h4>
        </a></li>

我的 step1.html（组件）

 <button (click)="goStep2()">go to step 2</button>

【问题讨论】：

标签： javascript twitter-bootstrap angular

【解决方案1】：

您可以设置一个变量step1Done = false，并在调用goStep2() 时，在该函数中设置this.step1Done = true，然后将该值绑定到您的html 中的一个类[class.done]='step1Done
李>
你可以在 .ts 组件中处理所有这些，在您的 html 中使用模板引用 <div #myDiv> 使用 @ViewChild() myDiv; 获取 .ts 文件中的元素，然后在您的 goStep2() 函数中添加类 this.myDiv.nativeElement.classList.add('done')

【讨论】：