Question

因此，我一直在尝试通过仪表板中按钮的单击事件来更改侧栏的选项卡。同时也更改侧边栏的活动标签类。

另外，我是angel的新手，所以请多多包涵。

作为参考，请参阅图片和代码。

代码：

仪表板按钮：

<div class="sub-div ">
            <div class="col-md-12 col-sm-12 ">
                <div class="col-blue mtop10 f1rem fsemibold mleft5">Schedule an exam</div>
                <div class="text-muted mtop10 f1rem fregular  mleft5">Schedule your next exam and let all the teachers and parents know </div>
                <div class="clearfix visible-lg">&nbsp;</div>
                <button  class="ugbtn float-right mtop10  mbottom10"> Set date</button>
            </div>

侧边栏html：

<div id="sidebar" class="sidenav fsemibold f15 col-white">
<a  align="left">DAV Public School  <i class="fa fa-cog i pull-right"></i></a>
<a  [className] = "activeClassArray[0]" (click)="changeClass(0)" align="left" >Dashboard</a>
<a  [className] = "activeClassArray[1]" (click)="changeClass(1)" align="left">Exams</a>
<a  [className] = "activeClassArray[2]" (click)="changeClass(2)" align="left">Timetable</a>
<a  [className] = "activeClassArray[3]" (click)="changeClass(3)" align="left">Staff attendence</a>
<a  [className] = "activeClassArray[4]" (click)="changeClass(4)" align="left">Fees </a>
<a  [className] = "activeClassArray[5]" (click)="changeClass(5)" align="left">Salary</a>
</div>

侧边栏ts文件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LogoutService } from '../../services/logout/logout.service';
@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  public activeClassArray = ['', '', '', '', '', '' ];
  constructor( private router: Router, private logoutService: LogoutService ) { }

  ngOnInit() {
  }

  public changeClass(id: number): void {
    for (let index = 0; index < this.activeClassArray.length; index++) {
      this.activeClassArray[index] = '';
    }
    this.activeClassArray[id] = 'active';
    switch (id) {
      case 0:
        this.router.navigateByUrl('dashboard');
        break;
      case 1:
        this.router.navigateByUrl('exam');
        break;
      case 2:
        this.router.navigateByUrl('timetable');
        break;
      case 3:
        this.router.navigateByUrl('staffattendance');
        break;
      case 4:
        this.router.navigateByUrl('fees');
        break;
      case 5:
        this.router.navigateByUrl('salary');
        break;
    }
  }

  doLogout(){
    this.logoutService.attemptLogout().subscribe(response=>{
      console.log(response);
      if(response!=null){
        if(response.error!=null){
          alert(response.error);
        }
        else{
          if(response.data.success){
            this.logoutService.moveToSignInPage();
          }
        }
      }
      else{
        alert("Oops something went wrong with server");
      }
    });
  }

}

TDLR：如何单击仪表板按钮，将活动班级更改为考试，并更改为考试的路线？

谢谢。

如何从侧边栏的仪表板选项卡更改活动选项卡

0 个答案: