BizDoc exposes two routing services, RouterImpl and PanesRouter.

BizDoc panes to present side-by-side components and tabs.

A user may be updating a document while exploring budget usage, or clicking on a report to open document details.

Navigation between panes is done by utilizing the PanesRouter service.

@Component({ })
export class AppComponent {
  constructor(private _router: RouterImpl) {}
  open() {
    const cube = 'my-cube',
        view = 'view1';
    this._router.navigate(['cube', cube, 'v', view], {
        state: {}
    })
  }
}

@Component({ })
export class AppComponent {
  constructor(private _router: PanesRouter) {}
  open() {
    this._router.navigate(AppComponent, {
      policy: OpenPolicy.Tab
    })
  }
}

Properties

Events

resize

modeChange

dataChange

paramsChange

queryParamsChange

class MyComp {
  constructor(private _router: PanesRouter) {
  }
  navTo(item: DocumentModel) {
    this._router.navigate(['mailbox', 'd', item.documentId.encodeId()]);
  }
}

Available options for navigation:

Policy can be a combination of:

Default is Pane.

PanesRouter can navigate to either a pre-registered path or a component. To navigate to a path, register the path in your AppModule. Use : to insert a parameter to path.

  imports: [
    BizDocModule.forRoot({ 
      routes: [{
        component: MyComp,
        path: 'my-path'
      }]
    })
  ];

To navigate to a component, provide the component type as the navigation parameter.

    this._router.navigate(MyComp);

Route accepts the following options:

You get the pane reference by injecting PaneRef to the component constructor.

class MyComp {
  constructor(private _pane: PaneRef<MyComp>) {
    
  }
}

Like @angular/router, pane accepts three different states: data, params and queryParams. You can listen to pane state change by tapping to one of PaneRef observables.

If the slot is already open, it will responde to state changes.

You can pass one or more parameters to navigation url. For example catalog/items/123.

To retreive the parameter on the slot components, tap to the paramsChange observable:

    this._slot.paramChange.subscribe(p => console.log(p['id']))

Use the queryParameters option of the router navigate method to share parameters with a pane.

_router.navigate([], {queryParams: {myParam: 1}})

Tap into the queryParamsChange observable to listen to query change.

Pass a model to a pane using the state option of the router navigate method.

Tap into dataChange observable to listen to data state.

Pane registered from the forRoot() method may provide a Resolve service which responds to the pane data model:

@Injectable()
export class MyCompResolver implements Resolve<MyModel> {
  onResolve() {
    return of(new MyModel());
  }
}

A component can listen to other panes navigation by tapping to the PaneRouter events.

    this._router.events.pipe(filter(e => e instanceOf QueryParamsNavigation && e.pane.component === MyComp)). 
      subscribe(e => ... )

Events are: