ngx-transloco-markup-router-link
Version:
Link renderer for ngx-tranlate-markup that supports router links
111 lines (104 loc) • 4.69 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable } from '@angular/core';
import * as i1 from '@angular/router';
import * as i2 from '@angular/common';
import { provideLinkRenderer } from 'ngx-transloco-markup';
/**
* Checks whether the given value is an object that contains a property with the specified key.
*
* @param subject Value which is to be checked.
* @param key Name of the property which should be present in the given value.
* @returns `true` if the given value is an object containing the specified property, `false` if not.
*/
function hasProperty(subject, key) {
return typeof subject === 'object' && subject !== null && key in subject;
}
/**
* Type guard function to check whether the specified value is a `RouterLink`.
*
* @param value Value which is to be checked.
* @returns `true` if the specified value is a `RouterLink`, `false` if not.
*/
function isRouterLink(value) {
return (hasProperty(value, 'route') && (typeof value.route === 'string' || Array.isArray(value.route)) &&
(!hasProperty(value, 'target') || (value.target === undefined || typeof value.target === 'string')));
}
/**
* An implementation of `LinkRenderer` that supports the rendering of `RouterLink` values: links that target an (internal) Angular route.
*/
class RouterLinkRenderer {
constructor(router, locationStrategy) {
this.router = router;
this.locationStrategy = locationStrategy;
}
/**
* @inheritdoc
*/
supports(link) {
return isRouterLink(link);
}
/**
* @inheritdoc
*/
render(link, targetElement) {
this.setAnchorElementHref(targetElement, link);
this.setAnchorElementTarget(targetElement, link);
this.setAnchorElementClickHandler(targetElement, link);
}
setAnchorElementHref(anchorElement, link) {
anchorElement.href = this.getRouterLinkTargetUrl(link);
}
setAnchorElementTarget(anchorElement, link) {
if (link.target !== undefined) {
anchorElement.target = link.target;
}
}
setAnchorElementClickHandler(anchorElement, link) {
anchorElement.addEventListener('click', (clickEvent) => {
const useDefaultClickHandling = clickEventTargetsDifferentWindow(clickEvent) ||
routerLinkTargetsDifferentWindow(link);
if (!useDefaultClickHandling) {
clickEvent.preventDefault();
this.navigateTo(link);
}
});
}
navigateTo(link) {
this.router.navigateByUrl(this.convertRouterLinkToUrlTree(link), link);
}
getRouterLinkTargetUrl(link) {
const urlTree = this.convertRouterLinkToUrlTree(link);
const serializedUrl = this.router.serializeUrl(urlTree);
return this.locationStrategy.prepareExternalUrl(serializedUrl);
}
convertRouterLinkToUrlTree(link) {
const navigationCommands = getRouterLinkNavigationCommands(link);
return this.router.createUrlTree(navigationCommands, link);
}
}
RouterLinkRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RouterLinkRenderer, deps: [{ token: i1.Router }, { token: i2.LocationStrategy }], target: i0.ɵɵFactoryTarget.Injectable });
RouterLinkRenderer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RouterLinkRenderer });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: RouterLinkRenderer, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.LocationStrategy }]; } });
function getRouterLinkNavigationCommands(link) {
return Array.isArray(link.route) ? link.route : [link.route];
}
function clickEventTargetsDifferentWindow(clickEvent) {
return clickEvent.button !== 0 || clickEvent.ctrlKey || clickEvent.metaKey || clickEvent.shiftKey;
}
function routerLinkTargetsDifferentWindow(link) {
return link.target !== undefined && link.target !== '_self';
}
/**
* Function that returns the provider which is needed to register the router link renderer to `ngx-transloco-markup`. You should add this
* the providers array of a `NgModule` decorator.
*/
function translocoMarkupRouterLinkRenderer() {
return [provideLinkRenderer(RouterLinkRenderer)];
}
/**
* Generated bundle index. Do not edit.
*/
export { RouterLinkRenderer, isRouterLink, translocoMarkupRouterLinkRenderer };
//# sourceMappingURL=ngx-transloco-markup-router-link.mjs.map