angular2切换tab页的问题?

先上代码
这是html

<ul class="nav nav-pills nav-justified settings-nav">
        <li role="presentation" [class.active]="judge('date')" (click)="select('date')"><a [routerLink]="['Date']">时间和日期</a></li>
        <li role="presentation" [class.active]="judge('network')" (click)="select('network')"><a [routerLink]="['Network']">网络</a></li>
        <li role="presentation" [class.active]="judge('video')" (click)="select('video')"><a [routerLink]="['Video']">视频</a></li>
    </ul>
import {Component} from 'angular2/core';
import {RouteConfig,Route,Router,ROUTER_DIRECTIVES} from 'angular2/router';
import {SettingNetwork} from './setting-network';
import {SettingTimeAndDate} from './setting-time-and-date';
import {SettingVideo} from './setting-video';

@Component({
    selector: 'setting',
    templateUrl: 'static/src/app/components/setting/setting.html',
    styleUrls: ['static/src/app/components/setting/setting.css'],
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    new Route({path: '/network', component: SettingNetwork, name: 'Network'}),
    new Route({path: '/date', component: SettingTimeAndDate, name: 'Date', useAsDefault: true}),
    new Route({path: '/video', component: SettingVideo, name: 'Video'})
])
export class Setting {
    selectedRouter='date';
    constructor() {}

    select(param){
        this.selectedRouter=param;
    }

    judge(param){
        return param ==this.selectedRouter;
    }
}

我现在的写法可以切换tab页,但是一旦刷新浏览器,tab的选中状态就会变成默认的date,我想让刷新浏览器的时候依然选中在当前tab上 该怎么做呢

阅读 5.6k
2 个回答

这样试试:

import {Component, OnInit} from 'angular2/core';
import {RouteConfig,Route,Router,ROUTER_DIRECTIVES} from 'angular2/router';
import {SettingNetwork} from './setting-network';
import {SettingTimeAndDate} from './setting-time-and-date';
import {SettingVideo} from './setting-video';

@Component({
    selector: 'setting',
    templateUrl: 'static/src/app/components/setting/setting.html',
    styleUrls: ['static/src/app/components/setting/setting.css'],
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    new Route({path: '/network', component: SettingNetwork, name: 'Network'}),
    new Route({path: '/date', component: SettingTimeAndDate, name: 'Date', useAsDefault: true}),
    new Route({path: '/video', component: SettingVideo, name: 'Video'})
])
export class Setting implements OnInit {
    selectedRouter='date';
    constructor(public location: Location) {}
    
    ngOnInit() {
        let path = this.location.path();
        this.selectedRouter= path.substring(1);
    }

    select(param){
        this.selectedRouter=param;
    }

    judge(param){
        return param ==this.selectedRouter;
    }
}

搭环境太累,我就直接上代码了,如果有语法错误,自己微调好了。应该能用

顺便说下,看你的用法,你的ng2版本有点老了,现在是2.0.0-rc.1,各模块已经分开了,你可能需要看看

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题