@angular/router-deprecated

class AsyncRoute

class AsyncRoute extends AbstractRoute {}

• AsyncRoute is a type of RouteDefinition used to route a path to an asynchronously loaded component.

  It has the following properties: - path is a string that uses the route matcher DSL. - loader is a function that returns a promise that resolves to a component. - name is an optional CamelCase string representing the name of the route. - data is an optional property of any type representing arbitrary route metadata for the given route. It is injectable via RouteData. - useAsDefault is a boolean value. If true, the child route will be navigated to if no child route is specified during the navigation.

  ### Example

  import {RouteConfig, AsyncRoute} from '@angular/router-deprecated';
  
  @RouteConfig([
    new AsyncRoute({path: '/home', loader: () => Promise.resolve(MyLoadedCmp), name:
  'MyLoadedCmp'})
  ])
  class MyApp {}

  @ts2dart_const

class AuxRoute

class AuxRoute extends AbstractRoute {}

• AuxRoute is a type of RouteDefinition used to define an auxiliary route.

  It takes an object with the following properties: - path is a string that uses the route matcher DSL. - component a component type. - name is an optional CamelCase string representing the name of the route. - data is an optional property of any type representing arbitrary route metadata for the given route. It is injectable via RouteData.

  ### Example

  import {RouteConfig, AuxRoute} from '@angular/router-deprecated';
  
  @RouteConfig([
    new AuxRoute({path: '/home', component: HomeCmp})
  ])
  class MyApp {}

  @ts2dart_const

class ComponentInstruction

class ComponentInstruction {}

• A ComponentInstruction represents the route state for a single component.

  ComponentInstructions is a public API. Instances of ComponentInstruction are passed to route lifecycle hooks, like CanActivate.

  ComponentInstructions are [hash consed](https://en.wikipedia.org/wiki/Hash_consing). You should never construct one yourself with "new." Instead, rely on router's internal recognizer to construct ComponentInstructions.

  You should not modify this object. It should be treated as immutable.

class Instruction

abstract class Instruction {}

• Instruction is a tree of ComponentInstructions with all the information needed to transition each component in the app to a given route, including all auxiliary routes.

  Instructions can be created using Router#generate, and can be used to perform route changes with Router#navigateByInstruction.

  ### Example

  import {Component} from '@angular/core';
  import {bootstrap} from '@angular/platform-browser/browser';
  import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from
  '@angular/router-deprecated';
  
  @Component({directives: [ROUTER_DIRECTIVES]})
  @RouteConfig([
   {...},
  ])
  class AppCmp {
    constructor(router: Router) {
      var instruction = router.generate(['/MyRoute']);
      router.navigateByInstruction(instruction);
    }
  }
  
  bootstrap(AppCmp, ROUTER_PROVIDERS);

class Redirect

class Redirect extends AbstractRoute {}

• Redirect is a type of RouteDefinition used to route a path to a canonical route.

  It has the following properties: - path is a string that uses the route matcher DSL. - redirectTo is an array representing the link DSL.

  Note that redirects **do not** affect how links are generated. For that, see the useAsDefault option.

  ### Example

  import {RouteConfig, Route, Redirect} from '@angular/router-deprecated';
  
  @RouteConfig([
    new Redirect({path: '/', redirectTo: ['/Home'] }),
    new Route({path: '/home', component: HomeCmp, name: 'Home'})
  ])
  class MyApp {}

  @ts2dart_const

class RootRouter

class RootRouter extends Router {}

class Route

class Route extends AbstractRoute {}

• Route is a type of RouteDefinition used to route a path to a component.

  It has the following properties: - path is a string that uses the route matcher DSL. - component a component type. - name is an optional CamelCase string representing the name of the route. - data is an optional property of any type representing arbitrary route metadata for the given route. It is injectable via RouteData. - useAsDefault is a boolean value. If true, the child route will be navigated to if no child route is specified during the navigation.

  ### Example

  import {RouteConfig, Route} from '@angular/router-deprecated';
  
  @RouteConfig([
    new Route({path: '/home', component: HomeCmp, name: 'HomeCmp' })
  ])
  class MyApp {}

  @ts2dart_const

class RouteData

class RouteData {}

• RouteData is an immutable map of additional data you can configure in your Route.

  You can inject RouteData into the constructor of a component to use it.

  ### Example

  import {Component} from '@angular/core';
  import {bootstrap} from '@angular/platform-browser/browser';
  import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteData} from
  'angular2/router';
  
  @Component({directives: [ROUTER_DIRECTIVES]})
  @RouteConfig([
   {path: '/user/:id', component: UserCmp, name: 'UserCmp', data: {isAdmin: true}},
  ])
  class AppCmp {}
  
  @Component({
    ...,
    template: 'user: {{isAdmin}}'
  })
  class UserCmp {
    string: isAdmin;
    constructor(data: RouteData) {
      this.isAdmin = data.get('isAdmin');
    }
  }
  
  bootstrap(AppCmp, ROUTER_PROVIDERS);

class RouteParams

class RouteParams {}

• RouteParams is an immutable map of parameters for the given route based on the url matcher and optional parameters for that route.

  You can inject RouteParams into the constructor of a component to use it.

  ### Example

  import {Component} from '@angular/core';
  import {bootstrap} from '@angular/platform-browser/browser';
  import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams} from
  'angular2/router';
  
  @Component({directives: [ROUTER_DIRECTIVES]})
  @RouteConfig([
   {path: '/user/:id', component: UserCmp, name: 'UserCmp'},
  ])
  class AppCmp {}
  
  @Component({ template: 'user: {{id}}' })
  class UserCmp {
    id: string;
    constructor(params: RouteParams) {
      this.id = params.get('id');
    }
  }
  
  bootstrap(AppCmp, ROUTER_PROVIDERS);

class Router

class Router {}

• The Router is responsible for mapping URLs to components.

  You can see the state of the router by inspecting the read-only field router.navigating. This may be useful for showing a spinner, for instance.

  ## Concepts

  Routers and component instances have a 1:1 correspondence.

  The router holds reference to a number of RouterOutlet. An outlet is a placeholder that the router dynamically fills in depending on the current URL.

  When the router navigates from a URL, it must first recognize it and serialize it into an Instruction. The router uses the RouteRegistry to get an Instruction.

class RouteRegistry

class RouteRegistry {}

• The RouteRegistry holds route configurations for each component in an Angular app. It is responsible for creating Instructions from URLs, and generating URLs based on route and parameters.

class RouterLink

class RouterLink {}

• The RouterLink directive lets you link to specific parts of your app.

  Consider the following route configuration:

  @RouteConfig([
    { path: '/user', component: UserCmp, name: 'User' }
  ]);
  class MyComp {}

  When linking to this User route, you can write:

  <a [routerLink]="['./User']">link to user component</a>

  RouterLink expects the value to be an array of route names, followed by the params for that level of routing. For instance ['/Team', {teamId: 1}, 'User', {userId: 2}] means that we want to generate a link for the Team route with params {teamId: 1}, and with a child route User with params {userId: 2}.

  The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.

class RouterOutlet

class RouterOutlet implements OnDestroy {}

• A router outlet is a placeholder that Angular dynamically fills based on the application's route.

  ## Use

  <router-outlet></router-outlet>

interface CanDeactivate

interface CanDeactivate {}

• Defines route lifecycle method routerCanDeactivate, which is called by the router to determine if a component can be removed as part of a navigation.

  The routerCanDeactivate hook is called with two ComponentInstructions as parameters, the first representing the current route being navigated to, and the second parameter representing the previous route.

  If routerCanDeactivate returns or resolves to false, the navigation is cancelled. If it returns or resolves to true, then the navigation continues, and the component will be deactivated (the OnDeactivate hook will be run) and removed.

  If routerCanDeactivate throws or rejects, the navigation is also cancelled.

  ### Example

interface CanReuse

interface CanReuse {}

• Defines route lifecycle method routerCanReuse, which is called by the router to determine whether a component should be reused across routes, or whether to destroy and instantiate a new component.

  The routerCanReuse hook is called with two ComponentInstructions as parameters, the first representing the current route being navigated to, and the second parameter representing the previous route.

  If routerCanReuse returns or resolves to true, the component instance will be reused and the OnDeactivate hook will be run. If routerCanReuse returns or resolves to false, a new component will be instantiated, and the existing component will be deactivated and removed as part of the navigation.

  If routerCanReuse throws or rejects, the navigation will be cancelled.

  ### Example

interface ComponentDefinition

interface ComponentDefinition {}

• Represents either a component type (type is component) or a loader function (type is loader).

  See also RouteDefinition.

interface OnActivate

interface OnActivate {}

• Defines route lifecycle method routerOnActivate, which is called by the router at the end of a successful route navigation.

  For a single component's navigation, only one of either OnActivate or OnReuse will be called depending on the result of CanReuse.

  The routerOnActivate hook is called with two ComponentInstructions as parameters, the first representing the current route being navigated to, and the second parameter representing the previous route or null.

  If routerOnActivate returns a promise, the route change will wait until the promise settles to instantiate and activate child components.

  ### Example

interface OnDeactivate

interface OnDeactivate {}

• Defines route lifecycle method routerOnDeactivate, which is called by the router before destroying a component as part of a route change.

  The routerOnDeactivate hook is called with two ComponentInstructions as parameters, the first representing the current route being navigated to, and the second parameter representing the previous route.

  If routerOnDeactivate returns a promise, the route change will wait until the promise settles.

  ### Example

interface OnReuse

interface OnReuse {}

• Defines route lifecycle method routerOnReuse, which is called by the router at the end of a successful route navigation when CanReuse is implemented and returns or resolves to true.

  For a single component's navigation, only one of either OnActivate or OnReuse will be called, depending on the result of CanReuse.

  The routerOnReuse hook is called with two ComponentInstructions as parameters, the first representing the current route being navigated to, and the second parameter representing the previous route or null.

  ### Example

interface RouteDefinition

interface RouteDefinition {}

• RouteDefinition defines a route within a RouteConfig decorator.

  Supported keys: - path or aux (requires exactly one of these) - component, loader, redirectTo (requires exactly one of these) - name (optional) - data (optional)

  See also Route, AsyncRoute, AuxRoute, and Redirect.