javascript - 让 Angular 在不刷新页面的情况下识别我的事件选项卡

Question

我正在 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>

这是相关的 CSS:

.app-page-view .page-content-header-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.app-page-view .page-content-header-item.selected {
  border-bottom: solid 6px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.1);
}

该组件如下所示:

// 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;
        }

    }

当我登陆事件选项卡时，我需要更改什么才能让 Angular 识别，而无需刷新页面？

Answer 1

不需要手动设置/取消设置类，只需使用routerLinkActive

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

检查这个Plunker!!

希望这有帮助!!