Hi Thomas,
This is perfect and exactly what I am looking for..
I tried using the code and modify it to use but its not working for Angular
6. giving error "property does not exist on type" for has attribute and
addEventlistner and
class name not for QueryList,
I am new to Angular and want to capture attribute from external file in
angular to route.
Thanks
Shweta
On Friday, August 4, 2017 at 3:25:05 PM UTC+5:30, Sander Elias wrote:
>
> Hi Thomas,
>
> Here is a directive that takes anchors and rewrites them to use the router.
>
> import { Directive, ElementRef, ContentChildren, ViewChildren } from
> '@angular/core';
> import { Router, RouterLink } from '@angular/router'
>
>
> @Directive({ selector: '[rewriteAnchors]' })
> export class rewriteAnchors {
>
> @ViewChildren(RouterLink) AnchorsInView: QueryList<RouterLink>;
> @ContentChildren( RouterLink) AnchorsInContent: QueryList<RouterLink>;
>
>
> constructor(
> private el: ElementRef,
> private router: Router
> ) { }
>
> ngAfterViewInit() {
> const el = this.el.nativeElement;
> //window.el = el;
> console.log(this.AnchorsInView, this.AnchorsInContent, el)
> if (el) {
> // this code only gets run in the browser, as other envs have
> (akaik) no nativeelement
> const links = Array.from(el.querySelectorAll("a"))
> .filter(l => !l.hasAttribute('ng-reflect-router-link'))
> .map(l => (console.log(l),l))
> .forEach(l => l.addEventListener('click', this.reroute(this)))
> ;
> }
> }
>
>
> reroute(me) {
> // use the closure to keep a reference to me(this)
> return function reroute(ev) {
> // might be confusing, but 'this' points to the element
> // orignating the click.
> ev.preventDefault();
> const url = this.getAttribute("href")
> me.router.navigateByUrl(url);
> };
> }
> }
>
>
>
> Is that what you are looking for?
>
> Regards
> Sander
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
