Angular 2: Routing auf neue Seite verhindern, wenn der Dienst

Question

In meinem Angular 2 app

home.html

<div> 
<nav> 
    <a [routerLink]="['Users']">Users</a> 
</nav> 
</div> 

app.component.ts

import {Component} from 'angular2/core'; 
import {Router,RouteConfig, ROUTER_DIRECTIVES,RouterOutlet} from 'angular2/router'; 
import {UsersComponent} from './users/users' 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'views/home.html', 
    directives: [ROUTER_DIRECTIVES, RouterOutlet] 
}) 
@RouteConfig([ 
{ 
    path: '/users', 
    name: 'Users', 
    component: UsersComponent 
} 
]) 
export class AppComponent { 

constructor(private _router:Router) {} 
} 

schlägt fehl users.ts

import {Component} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
import {DataService} from '../service'; 

@Component({ 
selector: 'my-app', 
templateUrl: 'views/user.html' 
}) 

export class UsersComponent { 

constructor(private dataService: DataService) { 
    this.dataService.getUserList().subscribe(
      (res) => { 
       console.log('response=>' + res); 
      }, 
      (error) => { 
       console.log('failure); 
      }); 
} 
} 

Wenn ein Fehler im Dienst ist, möchte ich das Routing auf die Seite user.html verhindern.

Alle Vorschläge würden sehr geschätzt werden.

Answer 1

CanActivate ist der richtige Lifecycle-Rückruf, um dies zu tun.

Derzeit erfordert die Verwendung von DI in @CanActivate() eine hässliche Problemumgehung (https://github.com/angular/angular/issues/4112), aber das Angular-Team arbeitet daran, das zu verbessern.