Component Route
Hierarchy
- Component
- Route
Index
Constructors
constructor
Returns Route
Properties
$params
The params provided by the url.
child
The child controller to render when the route's path is met.
controller
The component's controller.
element
The components element.
generator
The generator used to create the component.
id
The id by which to address the route relative to its parent.
path
The path of the route relative to its parent or thebase path.
resolvedID
The resolved id.
resolvedPath
A list of resolved parts of the route's path.
Static bindings
This static property lets you define listeners that will be executed whenproperties of the component change.
It should be a map where the keys are paths that should be watched on the component andthe values are names of methods that will be invoked on the component instance.
Example
In the following example you can see a component that reacts to changesin the size of the defining element.
export default class MyComponent extends Component { static inject: {element: Element}; static bindings = { 'element.clientHeight': 'heightChange' }; width: number; heightChange(height: number) { this.width = height * 2; }}Static locals
This static property defines which properties of the componentshould be available in its local scope which will be used by thecomponent's behaviors as well as by the defining element's children.
Values of this array represent the name of one of the component'sproperties that will be pushed to the local scope.
Example
export default class MyComponent extends Component { static locals = ['firstName', 'lastName'];}Static template
Static view
When inheriting from Route you can use this static attribute to provideeither a template or a path to a template file. When providing a pathMahalo automatically creates a split point during packaging for lazyloading of routes.
Methods
activate
Triggers rendering of the route.
Parameters
Default value routeParams: Object = {}
Returns void
canActivate
Can be overwritten to check conditions before activation.
Returns boolean
Private createController
Returns ComponentController
deactivate
Removes the route from the DOM.
Returns void
Private ensureTemplate
Returns void
enter
Returns void
Private initController
Parameters
Optional template: Template
Returns void
Private initTemplate
Parameters
template: Template
Returns void
leave
Returns void
match
Checks if the route should render.
Parameters
path: string[]
Returns void
ready
Returns void
remove
Implementation of Component.remove.
Returns void
resolve
Can return a promise that must be resolved before activating the route.
Returns void
In Mahalo routes are similar to rules. While it is importantto have rules, a ruler is an unnecessary evil. Just likea router would be in Mahalo. We only need individual routes.
Simple usage
A route is simply defined in a template like below. This route wouldonly render its contents into the DOM when the url relative to the basepath is about.
<route path="/about"> <h2>About</h2></route>Easy, isn't it. But it's not exactly true. Routes can be nested andthen become relative to their parent. Let's look at an example. Thefollowing shows an about page with three child routes.
<route path="/about"> <h2>About</h2> <route path="/"> Please choose: <a href="/history">History</a> <a href="/team">Team</a> </route> <route path="/history"> <h3>Team</h3> </route> <route path="/team"> <h3>Team</h3> </route></route>The first child route will render when the url relative to the base pathis about. Just like its parent. However when the url is about/teamonly the third child route will be rendered.
{ default } from mahalo/components/route