Angular 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：http://plnkr.co/edit/4ZkcBulnpqYcxjtQgXuG?p=preview

Angular 2 个选项卡在刷新后保留

Angular 2 Tabs retain after Refresh

tabs

angular2-directives

angular2-template

angular