角度2のタブは更新後に保持されます

Question

私はタブ上で動作しましたが正常に機能しますが、ページの更新時に選択したタブを有効にしておきます。

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

これは、作業plunkerです：

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

Answer 1

必要なのですストレージに保存するselectTabの間に選択したタブインデックスを確認し、初期化中にこれを確認しますngAfterContentInit。 この例では、localStorageを使用します。 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：私の実際のプロジェクトで実施しながら、1の問題に直面して、あなたの編集のためのhttp://plnkr.co/edit/4ZkcBulnpqYcxjtQgXuG?p=preview