Angular 2：如果服务失败，则阻止路由到新页面

Question

在我的Angular 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团队正在努力改进它。