Winkel erkennen, um meine aktive Registerkarte zu erkennen, ohne Seite zu aktualisieren

Question

Ich verwende einen helleren Hintergrund und eine Unterstreichung für aktive Registerkarten in meiner Angular 2 App. Derzeit gilt das aktive Tabstyling jedoch NUR, wenn ich die Seite aktualisiere. Wenn ich zum ersten Mal über ein Element blicke, wird das Styling angewendet, und wenn ich dann auf diese Registerkarte klicke (d. H. Es aktiviere), verschwindet der Stil und wird nur angezeigt, wenn ich die Seite aktualisiere. Dies ist also eindeutig nicht das gewünschte Verhalten. Irgendwie überprüft Angular erst nach der Seitenaktualisierung, anstatt auf dem Ereignis, Änderungen am Styling. Diese

ist, was meiner Ansicht nach wie folgt aussieht:

<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> 

Und hier ist die entsprechende 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); 
} 

Die Komponente sieht wie folgt aus:

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

    } 

Was muss ich ändern, um Angular erkennen zu lassen, wenn ich auf einem aktiven Tab gelandet bin, ohne die Seite aktualisieren zu müssen?

Answer 1

Sie müssen nicht manuell \ ungesetzt Klasse auf, verwenden Sie einfach routerLinkActive

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

prüfen diese Plunker!!

hoffe, das hilft !!