[Angular2 Router] Guard: CanLoad

‘canLoad‘ guard can decide whether a lazy load module can be loaded or not.

@Injectable()

export class CanLoadPokemon implements CanLoad {

  constructor(private authService: AuthService) {

  }
  canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean {
    return this.authService.isAuth;
  }

}

app.routers.ts:

{path: ‘home‘, loadChildren: ‘app/home/home.module‘, data: {title: ‘Pokemon List‘}, canLoad: [CanLoadPokemon]},

So if user not login, app won‘t load home module.

时间： 2024-10-12 12:29:40

[Angular2 Router] Guard: CanLoad的相关文章

Angular2 Router

1 import Router import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router'; 2 setting your RouteConfig @RouteConfig([ {path: '/', component: List, as: 'list'}, {path: '/about', component: Add, as: 'add'}, {path: '/help',

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

[Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also goi

[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example

Angular2 Router路由相关

路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则. eg: 路由设置如下: export const reportRoute: Routes = [ { path: 'report', children: [ { path: '', component: ReportComponent },{ path: ':id', component: ReportDetailComponent },{ path: 'report-new',

[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t

[Angular2 Router] Lazy Load Angular 2 Modules with the Router

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional

[Angular2 Router] Preload lzay loading modules

From router v3.1.0, we have preloading system with router. PreloadAllModules After the init module loaded, router will preloading the rest module at the background. const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'}; const fallbackR

[Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different bet