首页 > angular2切换tab页的问题?

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上 该怎么做呢


这样试试:

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


为了当前路由的active的效果,硬搞出个tab功能,完全没必要,看看这个吧

http://stackoverflow.com/questions/34571517/angular-2-how-to-determine-active-route-with-parameters/34571947#34571947

【热门文章】
【热门文章】