I am working with a asp.net core application with angular2 and my routing is working fine.
<a target="target" routerLink="/page1" routerLinkActive="active">Associates</a>
<a routerLink="/page2" routerLinkActive="active">Account managers</a>
I want to open every page link (routerLink) in a new tab. Is it possible that every link is open in a new tab, without refreshing the page?
I have tried to replace routerLink="/Page2"
by target="target" href="/associates"
but the page refreshes all the reference.
This question is related to
angular
typescript
This directive works as a [routerLink] replacement. All you have to do is to replace your [routerLink] usages with [link]. It works with ctrl+click, cmd+click, middle click.
import {Directive, HostListener, Input} from '@angular/core'
import {Router} from '@angular/router'
import _ from 'lodash'
import qs from 'qs'
@Directive({
selector: '[link]'
})
export class LinkDirective {
@Input() link: string
@HostListener('click', ['$event'])
onClick($event) {
// ctrl+click, cmd+click
if ($event.ctrlKey || $event.metaKey) {
$event.preventDefault()
$event.stopPropagation()
window.open(this.getUrl(this.link), '_blank')
} else {
this.router.navigate(this.getLink(this.link))
}
}
@HostListener('mouseup', ['$event'])
onMouseUp($event) {
// middleclick
if ($event.which == 2) {
$event.preventDefault()
$event.stopPropagation()
window.open(this.getUrl(this.link), '_blank')
}
}
constructor(private router: Router) {}
private getLink(link): any[] {
if ( ! _.isArray(link)) {
link = [link]
}
return link
}
private getUrl(link): string {
let url = ''
if (_.isArray(link)) {
url = link[0]
if (link[1]) {
url += '?' + qs.stringify(link[1])
}
} else {
url = link
}
return url
}
}
Late to this one, but I just discovered an alternative way of doing it:
On your template,
<a (click)="navigateAssociates()">Associates</a>
And on your component.ts, you can use serializeUrl
to convert the route into a string, which can be used with window.open()
navigateAssociates() {
const url = this.router.serializeUrl(
this.router.createUrlTree(['/page1'])
);
window.open(url, '_blank');
}
In my use case, I wanted to asynchronously retrieve a url, and then follow that url to an external resource in a new window. A directive seemed overkill because I don't need reusability, so I simply did:
<button (click)="navigateToResource()">Navigate</button>
And in my component.ts
navigateToResource(): void {
this.service.getUrl((result: any) => window.open(result.url));
}
Routing to a link indirectly like this will likely trigger the browser's popup blocker.
This seems a little confused.
Opening your application in another window or tab will require your entire application to be re-bootstrapped, and then for your router to... pick up that url, convert it into a route, and load the appropriate component.
This is exactly what will happen if you just use a link instead. In fact, that's all that's happening.
The point of the router is to swap components in and out of your router-outlet, which is something that's been bootstrapped and exists within the confines of your running application and isn't shared across multiple windows.
Source: Stackoverflow.com