/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import { LocationStrategy } from '@angular/common'; import { Directive, HostBinding, HostListener, Input } from '@angular/core'; import { NavigationEnd, Router } from '../router'; import { ActivatedRoute } from '../router_state'; /** * \@whatItDoes Lets you link to specific parts of your app. * * \@howToUse * * Consider the following route configuration: * `[{ path: 'user/:name', component: UserCmp }]` * * When linking to this `user/:name` route, you can write: * `link to user component` * * \@description * * The RouterLink directives let you link to specific parts of your app. * * When the link is static, you can use the directive as follows: * `link to user component` * * If you use dynamic values to generate the link, you can pass an array of path * segments, followed by the params for each segment. * * For instance `['/team', teamId, 'user', userName, {details: true}]` * means that we want to generate a link to `/team/11/user/bob;details=true`. * * Multiple static segments can be merged into one * (e.g., `['/team/11/user', userName, {details: true}]`). * * The first segment name can be prepended with `/`, `./`, or `../`: * * If the first segment begins with `/`, the router will look up the route from the root of the * app. * * If the first segment begins with `./`, or doesn't begin with a slash, the router will * instead look in the children of the current activated route. * * And if the first segment begins with `../`, the router will go up one level. * * You can set query params and fragment as follows: * * ``` * * link to user component * * ``` * RouterLink will use these to generate this link: `/user/bob#education?debug=true`. * * You can also tell the directive to preserve the current query params and fragment: * * ``` * * link to user component * * ``` * * The router link directive always treats the provided input as a delta to the current url. * * For instance, if the current url is `/user/(box//aux:team)`. * * Then the following link `Jim` will generate the link * `/user/(jim//aux:team)`. * * \@selector ':not(a)[routerLink]' * \@ngModule RouterModule * * See {\@link Router.createUrlTree} for more information. * * \@stable */ export var RouterLink = (function () { /** * @param {?} router * @param {?} route */ function RouterLink(router, route) { this.router = router; this.route = route; this.commands = []; } Object.defineProperty(RouterLink.prototype, "routerLink", { /** * @param {?} commands * @return {?} */ set: function (commands) { if (commands != null) { this.commands = Array.isArray(commands) ? commands : [commands]; } else { this.commands = []; } }, enumerable: true, configurable: true }); /** * @return {?} */ RouterLink.prototype.onClick = function () { var /** @type {?} */ extras = { skipLocationChange: attrBoolValue(this.skipLocationChange), replaceUrl: attrBoolValue(this.replaceUrl), }; this.router.navigateByUrl(this.urlTree, extras); return true; }; Object.defineProperty(RouterLink.prototype, "urlTree", { /** * @return {?} */ get: function () { return this.router.createUrlTree(this.commands, { relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment, preserveQueryParams: attrBoolValue(this.preserveQueryParams), preserveFragment: attrBoolValue(this.preserveFragment), }); }, enumerable: true, configurable: true }); RouterLink.decorators = [ { type: Directive, args: [{ selector: ':not(a)[routerLink]' },] }, ]; /** @nocollapse */ RouterLink.ctorParameters = function () { return [ { type: Router, }, { type: ActivatedRoute, }, ]; }; RouterLink.propDecorators = { 'queryParams': [{ type: Input },], 'fragment': [{ type: Input },], 'preserveQueryParams': [{ type: Input },], 'preserveFragment': [{ type: Input },], 'skipLocationChange': [{ type: Input },], 'replaceUrl': [{ type: Input },], 'routerLink': [{ type: Input },], 'onClick': [{ type: HostListener, args: ['click',] },], }; return RouterLink; }()); function RouterLink_tsickle_Closure_declarations() { /** @type {?} */ RouterLink.decorators; /** * @nocollapse * @type {?} */ RouterLink.ctorParameters; /** @type {?} */ RouterLink.propDecorators; /** @type {?} */ RouterLink.prototype.queryParams; /** @type {?} */ RouterLink.prototype.fragment; /** @type {?} */ RouterLink.prototype.preserveQueryParams; /** @type {?} */ RouterLink.prototype.preserveFragment; /** @type {?} */ RouterLink.prototype.skipLocationChange; /** @type {?} */ RouterLink.prototype.replaceUrl; /** @type {?} */ RouterLink.prototype.commands; /** @type {?} */ RouterLink.prototype.router; /** @type {?} */ RouterLink.prototype.route; } /** * \@whatItDoes Lets you link to specific parts of your app. * * See {\@link RouterLink} for more information. * * \@selector 'a[routerLink]' * \@ngModule RouterModule * * \@stable */ export var RouterLinkWithHref = (function () { /** * @param {?} router * @param {?} route * @param {?} locationStrategy */ function RouterLinkWithHref(router, route, locationStrategy) { var _this = this; this.router = router; this.route = route; this.locationStrategy = locationStrategy; this.commands = []; this.subscription = router.events.subscribe(function (s) { if (s instanceof NavigationEnd) { _this.updateTargetUrlAndHref(); } }); } Object.defineProperty(RouterLinkWithHref.prototype, "routerLink", { /** * @param {?} commands * @return {?} */ set: function (commands) { if (commands != null) { this.commands = Array.isArray(commands) ? commands : [commands]; } else { this.commands = []; } }, enumerable: true, configurable: true }); /** * @param {?} changes * @return {?} */ RouterLinkWithHref.prototype.ngOnChanges = function (changes) { this.updateTargetUrlAndHref(); }; /** * @return {?} */ RouterLinkWithHref.prototype.ngOnDestroy = function () { this.subscription.unsubscribe(); }; /** * @param {?} button * @param {?} ctrlKey * @param {?} metaKey * @return {?} */ RouterLinkWithHref.prototype.onClick = function (button, ctrlKey, metaKey) { if (button !== 0 || ctrlKey || metaKey) { return true; } if (typeof this.target === 'string' && this.target != '_self') { return true; } var /** @type {?} */ extras = { skipLocationChange: attrBoolValue(this.skipLocationChange), replaceUrl: attrBoolValue(this.replaceUrl), }; this.router.navigateByUrl(this.urlTree, extras); return false; }; /** * @return {?} */ RouterLinkWithHref.prototype.updateTargetUrlAndHref = function () { this.href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.urlTree)); }; Object.defineProperty(RouterLinkWithHref.prototype, "urlTree", { /** * @return {?} */ get: function () { return this.router.createUrlTree(this.commands, { relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment, preserveQueryParams: attrBoolValue(this.preserveQueryParams), preserveFragment: attrBoolValue(this.preserveFragment), }); }, enumerable: true, configurable: true }); RouterLinkWithHref.decorators = [ { type: Directive, args: [{ selector: 'a[routerLink]' },] }, ]; /** @nocollapse */ RouterLinkWithHref.ctorParameters = function () { return [ { type: Router, }, { type: ActivatedRoute, }, { type: LocationStrategy, }, ]; }; RouterLinkWithHref.propDecorators = { 'target': [{ type: HostBinding, args: ['attr.target',] }, { type: Input },], 'queryParams': [{ type: Input },], 'fragment': [{ type: Input },], 'preserveQueryParams': [{ type: Input },], 'preserveFragment': [{ type: Input },], 'skipLocationChange': [{ type: Input },], 'replaceUrl': [{ type: Input },], 'href': [{ type: HostBinding },], 'routerLink': [{ type: Input },], 'onClick': [{ type: HostListener, args: ['click', ['$event.button', '$event.ctrlKey', '$event.metaKey'],] },], }; return RouterLinkWithHref; }()); function RouterLinkWithHref_tsickle_Closure_declarations() { /** @type {?} */ RouterLinkWithHref.decorators; /** * @nocollapse * @type {?} */ RouterLinkWithHref.ctorParameters; /** @type {?} */ RouterLinkWithHref.propDecorators; /** @type {?} */ RouterLinkWithHref.prototype.target; /** @type {?} */ RouterLinkWithHref.prototype.queryParams; /** @type {?} */ RouterLinkWithHref.prototype.fragment; /** @type {?} */ RouterLinkWithHref.prototype.preserveQueryParams; /** @type {?} */ RouterLinkWithHref.prototype.preserveFragment; /** @type {?} */ RouterLinkWithHref.prototype.skipLocationChange; /** @type {?} */ RouterLinkWithHref.prototype.replaceUrl; /** @type {?} */ RouterLinkWithHref.prototype.commands; /** @type {?} */ RouterLinkWithHref.prototype.subscription; /** @type {?} */ RouterLinkWithHref.prototype.href; /** @type {?} */ RouterLinkWithHref.prototype.router; /** @type {?} */ RouterLinkWithHref.prototype.route; /** @type {?} */ RouterLinkWithHref.prototype.locationStrategy; } /** * @param {?} s * @return {?} */ function attrBoolValue(s) { return s === '' || !!s; } //# sourceMappingURL=router_link.js.map