獲得 「不提供程序錯誤」 使用CanActivate後衛

Question

這當是後衛：

// my.guard.ts 
import { Injectable } from '@angular/core'; 
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router'; 

Injectable() 
export class MyGuard implements CanActivate { 
    canActivate(next: ActivatedRouteSnapshot, prev: RouterStateSnapshot) { 
    console.log('GUARD:', next, prev); 
    return true; 
    } 
} 

這是路由器：

import { RouterConfig } from '@angular/router'; 
import { MyGuard } from './guards/my.guard'; 
export const AppRoutes : RouterConfig = [ 
    { 
    path: 'home', 
    component: HomeComponent, 
    canActivate: [MyGuard] 
    } 
]; 

頁面加載時我得到：

EXCEPTION: Error: Uncaught (in promise): No provider for MyGuard! 

我沒有見過任何教程提及如何注入MyGuard作爲提供者。我該怎麼做呢？

Answer 1

你的路由配置應該是這樣的：

export const APP_ROUTER_PROVIDERS = [ 
    MyGuard, <== notice this line 
    provideRouter(AppRoutes) 
]; 

然後

import { APP_ROUTER_PROVIDERS } from './app.routes';  
import { AppComponent } from './app.component'; 

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS 
]) 

Answer 2

我的解決辦法是把AuthGuard服務添加到供應商在我的AppModule元數據：

@NgModule({ 
    ... 
    providers: [AuthGuard], 
}) 
export class AppModule {} 

爲了能夠在整個應用程序中使用服務，您需要在AppModule中提供它元數據。 https://angular.io/docs/ts/latest/guide/ngmodule.html上的「服務提供商」部分給了我提示。