Angular 2路由在某些页面上禁用导航栏链接

Question

So I have a strange problem. This is my routing file (without the imports):

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]);

This works fine on all pages except for the login and registration pages. When I go to the login page, the link to login still works, but the link to register is disabled.

Here is a html snippet from the navbar:

<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>

If I go to the registration page, both the link to login and to register is disabled...

What is going on?

Answer 1

      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>