A default version of the @gearAdvanced with the token already provided.
Works as a isProvider for the @provider.
A function that creates an instance of the Universal Router. For the work with the current module, it is essential to use this function instead of the direct creation of the instance of the Universal Router because it adds specific functionality to the Universal Router.
a list of Universal Router routes.
a list of Universal Router options.
an instance of the Universal Router.
Creates tokens to bind decorators with each other.
A decorator that works similar to the @value, but with some specific features.
Applied to a property of the class marked with the @provider decorator, current decorator allows it to receive a router and send it to consumers.
Applied to a property of the class marked with the @outlet decorator, current decorator allows it to receive result the route action returns.
a token issued by a createRouterToken function that connects all decorators in a single working system.
A default version of the @isProviderAdvanced with the token already provided.
A function that navigates the browser to the new URL.
a new URL to navigate to.
some data you want to use in the route action. It will be
accessible as a part of the context parameter:
const route: Route<any, any> = {
action({data}: RouteContext<any, any>) {
// use `data` in some way
}
}A default version of the @outletAdvanced with the token already provided.
A decorator that makes a class a router outlet. The outlet is a central part of the whole routing process because the content of the outlet depends on the current route.
The outlet class requires a property marked with the @gear decorator. This property will contain a content the current router provides.
a token issued by a createRouterToken function that connects all decorators in a single working system.
a list of routes the current outlet works with. You can use both routes array that is sent to the createRouter function or one of the nested children array.
You can also put outlet elements one into another following the nested model of the routes you use.
const routes = [
{
path: '/foo1',
action: () => '<my-foo></my-foo>',
children: [
{
path: '/bar1',
action: () => '<div>Bar #1</div>',
},
{
path: '/bar2',
action: () => '<div>Bar #2</div>',
},
]
},
{
path: '/foo2',
action: () => '<my-baz></my-baz>',
},
];
@outlet(routes);
class App extends HTMLElement {
@gear set result(value: string) {
this.innerHTML = value;
}
}
customElements.define('my-app', App);
@outlet(routes[0].children)
class Foo extends HTMLElement {
@gear set result(value: string) {
this.innerHTML = value;
}
}
customElements.define('my-foo', Foo);
navigate('/foo1/bar2');The following HTML will be displayed:
<my-app>
<my-foo>
<div>Bar #2</div>
</my-foo>
</my-app>A default version of the @providerAdvanced with the token already provided.
A decorator that creates a router provider. See @provider for more information.
a token issued by a createRouterToken function that connects all decorators in a single working system.
a list of provider options.
Generated using TypeDoc
This module provides a straightforward but comprehensive router solution for web components via the Universal Router.