角2：防止路由到新的頁面，如果服務失敗

Question

在我的角2的應用程序

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) {} 
} 

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

如果服務出現任何故障，我想阻止路由到user.html頁面。

任何建議將不勝感激。

Answer 1

CanActivate是正確的生命週期回調。

目前在@CanActivate()中使用DI需要一個醜陋的解決方法（https://github.com/angular/angular/issues/4112），但Angular團隊正在努力改進。