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

您不需要手动设置\ unset类，只需使用routerLinkActive

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

选中此Plunker!!

希望这会有所帮助!!

让Angular识别我的活动选项卡而不刷新页面

1 个答案: