Javascript 在不刷新页面的情况下识别我的活动选项卡

我正在为Angular 2应用程序中的活动选项卡应用较轻的背景和下划线。但是，目前，活动选项卡样式仅在我刷新页面时应用。当我第一次将鼠标悬停在某个项目上时，将应用样式，然后当我单击该选项卡（即使其处于活动状态）时，样式将消失，并且仅在我刷新页面时才会显示。很明显，这不是我们想要的行为。Angular直到页面刷新后才检查样式更改，而不是在事件上

这就是我的观点：

<div class="page-content-header">
    <div class="page-content-header-item" [class.selected]="isSection('section1')" routerLink="/section1" routerLinkActive="selected">Section 1</div>
    <div class="page-content-header-item" [class.selected]="isSection('section2')" routerLink="/section2" routerLinkActive="selected">Section 2</div>
    <div class="page-content-header-item" [class.selected]="isSection('section3')" routerLink="/section3" routerLinkActive="selected">Section 3</div>
</div>

该组件如下所示：

// Imports above here removed for brevity

    @Component({
      selector: 'section-tabs',
      templateUrl: './section-tabs.html',
    })
    export class SectionTabsComponent implements OnInit {

        private section;
        documents = [];
        errorMsg: string;

        constructor(private countsService: countsService) {}

        ngOnInit() {
          this.countsService.getCount('info')
              .subscribe(resRecordsData => this.documents = resRecordsData,
              responseRecordsError => this.errorMsg = responseRecordsError);
        }

        /**
         * Returns true if the specified name matches the current section
         * @param name
         */
        public isSection(name:string): boolean {
            return this.section && name === this.section;
        }

    }

---

当我登录到活动选项卡时，无需刷新页面，我需要做哪些更改才能进行角度识别？

您无需手动设置\unset类，只需使用

routerLinkActive

<a class="page-content-header-item" routerLink="/section1" routerLinkActive="selected">Section 1</a>

希望这有帮助
 您不需要手动设置\unset类，只需使用
routerLinkActive

<a class="page-content-header-item" routerLink="/section1" routerLinkActive="selected">Section 1</a>


希望这有帮助
 “就是这样，”马杜说。谢谢@穆里克：很高兴这有帮助，你们可以接受答案，干杯！！“就是这样，”马杜说。谢谢@穆里克：很高兴这有帮助，你们可以接受答案，干杯！！