Angular 2 onglets conservés après l'actualisation

Question

J'ai travaillé sur les onglets pour que cela fonctionne correctement mais je souhaite que l'onglet sélectionné reste actif lors de l'actualisation de la page.

<tabs> 
    <tab [tabTitle]="'Tab 1'">Tab 1 Content</tab> 
    <tab tabTitle="Tab 2">Tab 2 Content</tab> 
</tabs> 

src/tabs.ts

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core'; 
import { Tab } from './tab'; 

@Component({ 
    selector: 'tabs', 
    template:` 
    <ul class="nav nav-tabs"> 
     <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active"> 
     <a href="#">{{tab.title}}</a> 
     </li> 
    </ul> 
    <ng-content></ng-content> 
    ` 
}) 
export class Tabs implements AfterContentInit { 

    @ContentChildren(Tab) tabs: QueryList<Tab>; 

    // contentChildren are set 
    ngAfterContentInit() { 
    // get all active tabs 
    let activeTabs = this.tabs.filter((tab)=>tab.active); 

    // if there is no active tab set, activate the first 
    if(activeTabs.length === 0) { 
     this.selectTab(this.tabs.first); 
    } 
    } 

    selectTab(tab: Tab){ 
    // deactivate all tabs 
    this.tabs.toArray().forEach(tab => tab.active = false); 

    // activate the tab the user has clicked on. 
    tab.active = true; 
    } 

} 

src/tab.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'tab', 
    styles: [` 
    .pane{ 
     padding: 1em; 
    } 
    `], 
    template: ` 
    <div [hidden]="!active" class="pane"> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class Tab { 
    @Input('tabTitle') title: string; 
    @Input() active = false; 
} 

Ceci est un plunker de travail:

http://plnkr.co/edit/ctzfDxkGDWvnetWVRfwI?p=preview

Answer 1

Tout ce que vous avez besoin est stocker dans un stockage index de tabulation sélectionné pendant selectTab et vérifiez cela lors de l'initialisation ngAfterContentInit. Pour cet exemple, nous utiliserons localStorage.

dans src/tabs.ts

ngAfterContentInit() { 
    // get all active tabs 
    let activeTabs = this.tabs.filter((tab)=>tab.active); 
    //get the active tab from storage, 
    //if there are no stored, first tab is selected 
    let selectedIndex: number = parseInt(localStorage.getItem('selectedTabIndex')) || 0; 
    this.selectTab(this.tabs.toArray()[selectedIndex]); 

} 

selectTab(tab: Tab){ 
    // deactivate all tabs 
    this.tabs.toArray().forEach(tab => tab.active = false); 
    //store selected tab index in localStorage 
    let selectedIndex: number = this.tabs.toArray().indexOf(tab); 
    localStorage.setItem('selectedTabIndex',selectedIndex); 
    // activate the tab the user has clicked on. 
    tab.active = true; 
} 

plunker travail: http://plnkr.co/edit/4ZkcBulnpqYcxjtQgXuG?p=preview