Function Resolve

Component prototype property decorator factory. Applying the Resolve decorator to a property of a Component, while supplying an ObservableInput to be resolved, will replace the decorated property with a getter returning the Resolved value the supplied ObservableInput resolves to. To do so the Resolve decorator relies on the built-in ResolveQueue.

Example

Resolve the Router.Segment and Router.State:

import { Component, Resolve } from '@sgrud/shell';
import { of } from 'rxjs';

declare global {
  interface HTMLElementTagNameMap {
    'example-component': ExampleComponent;
  }
}

⁠@Component('example-component')
export class ExampleComponent extends HTMLElement implements Component {

  ⁠@Resolve((segment, state) => of([segment.route.path, state.search]))
  public readonly resolved!: [string, string];

  public get template(): JSX.Element {
    return <span>Resolved: {this.resolved.join('?')}</span>;
  }

}
Copy

See

ResolveQueue