Angular 2 route禁用某些页面上的导航栏链接

时间:2016-04-22 06:54:03

标签: angular twitter-bootstrap routes angular2-routing

所以我有一个奇怪的问题。这是我的路由文件(没有导入):

export var Routes = {
    home:           new Route({ path: '/',                  name: 'Home', component: Home }),
    photos:         new Route({ path: '/photos',            name: 'Photos', component: Photos }),
    albums:         new Route({ path: '/albums',            name: 'Albums', component: Albums }),
    account:        new Route({ path: '/account/...',       name: 'Account', component: Account }),
    albumPhotos:    new Route({ path: '/albums/:id/photos', name: 'AlbumPhotos', component: AlbumPhotos }),

    login:          new Route({ path: '/account/login',     name: 'Login', component: Login }),
    register:       new Route({ path: '/account/register',  name: 'Register', component: Register }),

    joke:           new Route({ path: '/joke',              name: 'Joke', component: Joke  }),
    team:           new Route({ path: '/team/',             name: 'Team', component: Team  }), 
    editTeam:       new Route({ path: '/team/:id',          name: 'EditTeam', component: EditTeam  }), 
    match:          new Route({ path: '/match/',            name: 'Match', component: Match  }),
    editMatch:      new Route({ path: '/match/:id',         name: 'EditMatch', component: EditMatch  }),
    detailMatch:    new Route({ path: '/detail/:id',        name: 'DetailMatch', component: DetailMatch  }),
    bet:            new Route({ path: '/bet',               name: 'Bet', component: Bet }), 
    editBet:        new Route({ path: '/bet/:id',           name: 'EditBet', component: EditBet  }),
    placeBet:       new Route({ path: '/bet/match/:id',     name: 'PlaceBet', component: PlaceBet  }),
    users:          new Route({ path: '/account/users',     name: 'Users', component: Users }) 

};

export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);

除登录页面和注册页面外,所有页面都可以正常使用。当我进入登录页面时,登录链接仍然有效,但是注册链接被禁用。

以下是导航栏中的html代码段:

<li *ngIf="!isUserLoggedIn()">
  <a [routerLink]="[routes.login.name]"><i class="fa fa-unlock-alt fa-fw"></i>&nbsp;Logg inn</a>
</li>
<li *ngIf="!isUserLoggedIn()">
  <a [routerLink]="[routes.register.name]"><i class="fa fa-unlock-alt fa-fw"></i>&nbsp;Register deg</a>
</li>

如果我进入注册页面,登录和注册的链接都被禁用...

发生了什么事?

1 个答案:

答案 0 :(得分:0)

      You are going correct just you change your routerLink in Html 

      For Eg:

       export var Routes = {
           photos: new Route({ path: '/photos', **name:'Photos'**,component:Photos }),
       };

      // Html For This /name of component
        <li *ngIf="!isUserLoggedIn()">
                    <a [routerLink]="['/Photos']"><i class="fa fa-unlock-alt fa-fw"></i>&nbsp;Logg inn</a>
        </li>