angular2切换tab页的问题？

十七1991

发布于
2016-05-24

先上代码
这是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上该怎么做呢

javascript angularjs typescript

阅读 5.6k

2 个回答

leftstick

这样试试：

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，各模块已经分开了，你可能需要看看