@rxdi/router
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.152 • Public • Published

    Router module for client side rxdi application

    Starter application

    Install

    npm i @rxdi/router

    Define routes with forRoot these will be evaluated lazy

    import { Module } from '@rxdi/core';
    import { RouterModule } from '@rxdi/router';
    import { DOCUMENTS } from './@introspection/documents';
    import { AppComponent } from './app.component';
    import { HomeComponent } from './home/home.component';
    import { Components } from './shared/components';
    import { NavbarComponent } from './navbar/navbar.component';
    import { FooterComponent } from './footer/footer.component';
    
    @Module({
      components: [
        HomeComponent,
        FooterComponent,
        NavbarComponent
      ],
      imports: [
        RouterModule.forRoot<Components>([
          {
            path: '/',
            component: 'home-component'
          },
          {
            path: '/about',
            component: 'about-component',
            action: () => import('./about/about.component')
          },
          {
            path: '/about/image-:size(\\d+)px',
            component: 'about-component',
            action: () => import('./about/about.component')
          },
          {
            path: '(.*)',
            component: 'not-found-component',
            action: () => import('./not-found/not-found.component')
          }
          //   { path: '/users/:user', component: 'x-user-profile' },
        ], { log: true })
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    Import <router-outlet></router-outlet> inside AppComponent

    import { html, Component } from '@rxdi/lit-html';
    
    /**
     * @customElement app-component
     */
    @Component({
      selector: 'app-component',
      template(this: AppComponent) {
        return html`
          <router-outlet></router-outlet>
        `,
      },
      container: document.body
    })
    export class AppComponent extends HTMLElement {}

    Adding header and footer inside router-outlet is simple using <slot></slot> element

    <router-outlet>
      <navbar-component slot="header"></navbar-component>
      <footer-component slot="footer"></footer-component>
    </router-outlet>

    Header and footer can be added also outside of router shadowDOM

    <navbar-component></navbar-component>
    <router-outlet></router-outlet>
    <footer-component></footer-component>

    Getting Route parameters using Typescript Decorator

    {path: '/profile/:name', component: 'x-user-profile'},

    import { Component, LitElement } from '@rxdi/lit-html';
    /**
     * @customElement x-user-profile
     */
    @Component({
      selector: 'x-user-profile'
    })
    export class UserProfile extends LitElement {
    
      @RouteParams()
      params: { name: string }
    
      render() {
        return html`${this.params.name}`;
      }
    }

    Router Guards

    Defining Guard

    import { Injectable } from '@rxdi/core';
    import { Observable } from 'rxjs';
    import {
     CanActivateContext,
     CanActivateCommands,
     CanActivateResolver,
     CanActivateRedirect
    } from '@rxdi/router';
    
    @Injectable()
    export class LoggedInGuard implements CanActivateResolver {
     OnInit() {}
      canActivate(
       context: CanActivateContext,
       commands: CanActivateCommands
     ):
       | CanActivateRedirect
       | boolean
       | Promise<boolean>
       | Observable<boolean>
       | void {
       // return false | true;
       // return new Promise((r) => r(true | false));
       // return new Observable((o) => {
       //     o.next(false | true);
       //     o.complete();
       // });
       // throw new Error('error');
     }
    }

    Using guard

    Importing module

    Guards can be defined inside RouterModule When particular route resolver is triggered you will stop in this Guard before component is resolved

    RouterModule.forRoot<Components>([
      {
        path: '/',
        component: 'home-component'
      },
      {
        path: '/about',
        component: 'about-component',
        children: () => import('./about/about.module'),
        canActivate: LoggedInGuard
      },
    ])

    Njoy!

    Hooks

    import { html, Component, async, LitElement } from '@rxdi/lit-html';
    import { timer } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { OnBeforeEnter, OnAfterEnter, OnAfterLeave, OnBeforeLeave } from '@rxdi/router';
    
    @Component({
      selector: 'about-component',
      template(this: AboutComponent) {
        return html`
        <header>
          <h1>About</h1>
        </header>
        <p>
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Italian Trulli">
        </p>
        `;
      }
    })
    export class AboutComponent extends LitElement implements OnBeforeEnter, OnAfterEnter, OnAfterLeave, OnBeforeLeave {
      onBeforeEnter() {
        this;
        debugger;
      }
      onAfterEnter() {
        this;
        debugger;
      }
      onBeforeLeave() {
        this;
        debugger;
      }
      onAfterLeave() {
        this;
        debugger;
      }
      OnInit() {
        debugger;
        console.log('About component init');
      }
    
      OnDestroy() {
        debugger;
        console.log('About component destroyed');
      }
    
    }

    Keywords

    none

    Install

    npm i @rxdi/router

    DownloadsWeekly Downloads

    14

    Version

    0.7.152

    License

    MIT

    Unpacked Size

    134 kB

    Total Files

    27

    Last publish

    Collaborators

    • gapi
    • rxdi