@this-dot/route-config
Version:
A library containing directives and services for configuring components via Route's routeData property
73 lines • 9.8 kB
JavaScript
import { Directive, Input, TemplateRef, ViewContainerRef, } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { distinctUntilChanged, switchMap, takeUntil, tap } from 'rxjs/operators';
import { RouteConfigService } from '../route-config.service';
import * as i0 from "@angular/core";
import * as i1 from "../route-config.service";
/**
* This directive allows for access to the whole `data` property defined in the current [Route](https://angular.io/api/router/Route#data) from a Component's template.
*
* @example
* <!-- We can use it as following: -->
* <h1 *tdRouteData="let data">
* Current title is: {{ data.title }}
* </h1>
*
* @example
* <!-- It is also possible to pass a default value so that if a property is not defined in the Route we will still receive some value: -->
* <h1 *tdRouteData="let data; defaultValue: { title: 'DefaultTitle', routeTags: ['defaultTag'] }">
* Current title is: {{ data.title }}
* </h1>
*
* @example
* <!-- If you want to access multiple properties in one component's template it is **recommended** to wrap the whole template with only one `*tdRouteData` directive. This approach follows DRY principle and is efficient as it only creates one subscription per template. -->
* <ng-container *tdRouteData="let data; defaultValue: { title: 'DefaultTitle', routeTags: ['defaultTag'] }">
* <h1>
* Current title is: {{ data.title }}
* </h1>
* <p>
* Current route contains the following tags: {{ data.routeTags | json }}
* </p>
* </ng-container>
*/
class RouteDataDirective {
set tdRouteDataDefaultValue(defaultValue) {
this.defaultValue$.next(defaultValue);
}
constructor(routeConfigService, template, entry) {
this.routeConfigService = routeConfigService;
this.template = template;
this.entry = entry;
this.destroy$ = new Subject();
this.defaultValue$ = new BehaviorSubject({});
this.data$ = this.defaultValue$.pipe(switchMap((defaultValue) => this.routeConfigService.getActivatedRouteConfig(defaultValue)), distinctUntilChanged());
this.createView$ = this.data$.pipe(tap((data) => {
this.view.context = {
$implicit: data,
};
this.view.markForCheck();
}));
}
ngOnInit() {
this.view = this.entry.createEmbeddedView(this.template, {
$implicit: this.defaultValue$.value,
});
this.createView$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RouteDataDirective, deps: [{ token: i1.RouteConfigService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: RouteDataDirective, selector: "[tdRouteData]", inputs: { tdRouteDataDefaultValue: "tdRouteDataDefaultValue" }, ngImport: i0 }); }
}
export { RouteDataDirective };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RouteDataDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdRouteData]',
}]
}], ctorParameters: function () { return [{ type: i1.RouteConfigService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { tdRouteDataDefaultValue: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm91dGUtZGF0YS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL3JvdXRlLWNvbmZpZy9zcmMvbGliL3JvdXRlLWRhdGEvcm91dGUtZGF0YS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxLQUFLLEVBR0wsV0FBVyxFQUNYLGdCQUFnQixHQUNqQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNoRCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRixPQUFPLEVBQUUsa0JBQWtCLEVBQWEsTUFBTSx5QkFBeUIsQ0FBQzs7O0FBTXhFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBeUJHO0FBQ0gsTUFHYSxrQkFBa0I7SUFvQjdCLElBQ0ksdUJBQXVCLENBQUMsWUFBZTtRQUN6QyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsWUFDVSxrQkFBc0MsRUFDdEMsUUFBbUQsRUFDbkQsS0FBdUI7UUFGdkIsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQUN0QyxhQUFRLEdBQVIsUUFBUSxDQUEyQztRQUNuRCxVQUFLLEdBQUwsS0FBSyxDQUFrQjtRQTNCekIsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFFL0Isa0JBQWEsR0FBRyxJQUFJLGVBQWUsQ0FBYSxFQUFFLENBQUMsQ0FBQztRQUdwRCxVQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQ3JDLFNBQVMsQ0FBQyxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLHVCQUF1QixDQUFJLFlBQVksQ0FBQyxDQUFDLEVBQzdGLG9CQUFvQixFQUFFLENBQ3ZCLENBQUM7UUFFTSxnQkFBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUNuQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUNYLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHO2dCQUNsQixTQUFTLEVBQUUsSUFBSTthQUNoQixDQUFDO1lBQ0YsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUMzQixDQUFDLENBQUMsQ0FDSCxDQUFDO0lBV0MsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUN2RCxTQUFTLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLO1NBQ3BDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUM5RCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDOzhHQTFDVSxrQkFBa0I7a0dBQWxCLGtCQUFrQjs7U0FBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBSDlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7aUJBQzFCO2tLQXNCSyx1QkFBdUI7c0JBRDFCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIEVtYmVkZGVkVmlld1JlZixcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NvbnRhaW5lclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGRpc3RpbmN0VW50aWxDaGFuZ2VkLCBzd2l0Y2hNYXAsIHRha2VVbnRpbCwgdGFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgUm91dGVDb25maWdTZXJ2aWNlLCBSb3V0ZURhdGEgfSBmcm9tICcuLi9yb3V0ZS1jb25maWcuc2VydmljZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUm91dGVEYXRhRGlyZWN0aXZlQ29udGV4dDxDPiB7XG4gICRpbXBsaWNpdDogQztcbn1cblxuLyoqXG4gKiBUaGlzIGRpcmVjdGl2ZSBhbGxvd3MgZm9yIGFjY2VzcyB0byB0aGUgd2hvbGUgYGRhdGFgIHByb3BlcnR5IGRlZmluZWQgaW4gdGhlIGN1cnJlbnQgW1JvdXRlXShodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZSNkYXRhKSBmcm9tIGEgQ29tcG9uZW50J3MgdGVtcGxhdGUuXG4gKlxuICogQGV4YW1wbGVcbiAqIDwhLS0gV2UgY2FuIHVzZSBpdCBhcyBmb2xsb3dpbmc6IC0tPlxuICogPGgxICp0ZFJvdXRlRGF0YT1cImxldCBkYXRhXCI+XG4gKiAgIEN1cnJlbnQgdGl0bGUgaXM6IHt7IGRhdGEudGl0bGUgfX1cbiAqIDwvaDE+XG4gKlxuICogQGV4YW1wbGVcbiAqIDwhLS0gSXQgaXMgYWxzbyBwb3NzaWJsZSB0byBwYXNzIGEgZGVmYXVsdCB2YWx1ZSBzbyB0aGF0IGlmIGEgcHJvcGVydHkgaXMgbm90IGRlZmluZWQgaW4gdGhlIFJvdXRlIHdlIHdpbGwgc3RpbGwgcmVjZWl2ZSBzb21lIHZhbHVlOiAtLT5cbiAqIDxoMSAqdGRSb3V0ZURhdGE9XCJsZXQgZGF0YTsgZGVmYXVsdFZhbHVlOiB7IHRpdGxlOiAnRGVmYXVsdFRpdGxlJywgcm91dGVUYWdzOiBbJ2RlZmF1bHRUYWcnXSB9XCI+XG4gKiAgIEN1cnJlbnQgdGl0bGUgaXM6IHt7IGRhdGEudGl0bGUgfX1cbiAqIDwvaDE+XG4gKlxuICogQGV4YW1wbGVcbiAqIDwhLS0gSWYgeW91IHdhbnQgdG8gYWNjZXNzIG11bHRpcGxlIHByb3BlcnRpZXMgaW4gb25lIGNvbXBvbmVudCdzIHRlbXBsYXRlIGl0IGlzICoqcmVjb21tZW5kZWQqKiB0byB3cmFwIHRoZSB3aG9sZSB0ZW1wbGF0ZSB3aXRoIG9ubHkgb25lIGAqdGRSb3V0ZURhdGFgIGRpcmVjdGl2ZS4gVGhpcyBhcHByb2FjaCBmb2xsb3dzIERSWSBwcmluY2lwbGUgYW5kIGlzIGVmZmljaWVudCBhcyBpdCBvbmx5IGNyZWF0ZXMgb25lIHN1YnNjcmlwdGlvbiBwZXIgdGVtcGxhdGUuIC0tPlxuICogPG5nLWNvbnRhaW5lciAqdGRSb3V0ZURhdGE9XCJsZXQgZGF0YTsgZGVmYXVsdFZhbHVlOiB7IHRpdGxlOiAnRGVmYXVsdFRpdGxlJywgcm91dGVUYWdzOiBbJ2RlZmF1bHRUYWcnXSB9XCI+XG4gKiAgIDxoMT5cbiAqICAgICBDdXJyZW50IHRpdGxlIGlzOiB7eyBkYXRhLnRpdGxlIH19XG4gKiAgIDwvaDE+XG4gKiAgIDxwPlxuICogICAgIEN1cnJlbnQgcm91dGUgY29udGFpbnMgdGhlIGZvbGxvd2luZyB0YWdzOiB7eyBkYXRhLnJvdXRlVGFncyB8IGpzb24gfX1cbiAqICAgPC9wPlxuICogPC9uZy1jb250YWluZXI+XG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1t0ZFJvdXRlRGF0YV0nLFxufSlcbmV4cG9ydCBjbGFzcyBSb3V0ZURhdGFEaXJlY3RpdmU8QyBleHRlbmRzIFJvdXRlRGF0YT4gaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIHByaXZhdGUgZGVmYXVsdFZhbHVlJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8UGFydGlhbDxDPj4oe30pO1xuICBwcml2YXRlIHZpZXchOiBFbWJlZGRlZFZpZXdSZWY8Um91dGVEYXRhRGlyZWN0aXZlQ29udGV4dDxQYXJ0aWFsPEM+Pj47XG5cbiAgcHJpdmF0ZSBkYXRhJCA9IHRoaXMuZGVmYXVsdFZhbHVlJC5waXBlKFxuICAgIHN3aXRjaE1hcCgoZGVmYXVsdFZhbHVlKSA9PiB0aGlzLnJvdXRlQ29uZmlnU2VydmljZS5nZXRBY3RpdmF0ZWRSb3V0ZUNvbmZpZzxDPihkZWZhdWx0VmFsdWUpKSxcbiAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpXG4gICk7XG5cbiAgcHJpdmF0ZSBjcmVhdGVWaWV3JCA9IHRoaXMuZGF0YSQucGlwZShcbiAgICB0YXAoKGRhdGEpID0+IHtcbiAgICAgIHRoaXMudmlldy5jb250ZXh0ID0ge1xuICAgICAgICAkaW1wbGljaXQ6IGRhdGEsXG4gICAgICB9O1xuICAgICAgdGhpcy52aWV3Lm1hcmtGb3JDaGVjaygpO1xuICAgIH0pXG4gICk7XG5cbiAgQElucHV0KClcbiAgc2V0IHRkUm91dGVEYXRhRGVmYXVsdFZhbHVlKGRlZmF1bHRWYWx1ZTogQykge1xuICAgIHRoaXMuZGVmYXVsdFZhbHVlJC5uZXh0KGRlZmF1bHRWYWx1ZSk7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJvdXRlQ29uZmlnU2VydmljZTogUm91dGVDb25maWdTZXJ2aWNlLFxuICAgIHByaXZhdGUgdGVtcGxhdGU6IFRlbXBsYXRlUmVmPFJvdXRlRGF0YURpcmVjdGl2ZUNvbnRleHQ8Qz4+LFxuICAgIHByaXZhdGUgZW50cnk6IFZpZXdDb250YWluZXJSZWZcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMudmlldyA9IHRoaXMuZW50cnkuY3JlYXRlRW1iZWRkZWRWaWV3KHRoaXMudGVtcGxhdGUsIHtcbiAgICAgICRpbXBsaWNpdDogdGhpcy5kZWZhdWx0VmFsdWUkLnZhbHVlLFxuICAgIH0pO1xuXG4gICAgdGhpcy5jcmVhdGVWaWV3JC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSkuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gIH1cbn1cbiJdfQ==