2016-04-20 36 views
0

を失敗した場合は、新しいページへのルーティングを防ぐ角度2:サービスは私の角度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ページへのルーティングを防止するサービスのいずれかの障害が発生した場合。

任意の提案を高く評価されるだろう。

答えて

1

CanActivateはこれを行うには、右のライフサイクル・コールバックです。

現在DIを@CanActivate()で使用しているのは、醜い回避策(https://github.com/angular/angular/issues/4112)が必要ですが、Angularチームはその改善に取り組んでいます。

+0

私のコードでCanActivateを使用する方法を投稿してください。 – Rose18

+1

http://plnkr.co/edit/SF8gsYN1SvmUbkosHjqQ?p=previewはあなたのコードに適応するのは難しくありません。 –