Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ctrl+Click behaviour to open new tab does not work with RouterLink #5908

Closed
pcroc opened this Issue Dec 15, 2015 · 10 comments

Comments

Projects
None yet
8 participants
@pcroc
Copy link

pcroc commented Dec 15, 2015

In Chrome or FF, I often like to Ctrl+Click a link to open it in a new tab.

An anchor with the [router-link] directive does not behave this way, and affects the current browser tab. This could be very annoying for users.

@gaiottino

This comment has been minimized.

Copy link

gaiottino commented Jan 6, 2016

Agree. This is something that many users rely on and should be supported.

@ThiagoT1

This comment has been minimized.

Copy link

ThiagoT1 commented Jan 16, 2016

Any workaround or ETA on this?

@ThiagoT1

This comment has been minimized.

Copy link

ThiagoT1 commented Jan 16, 2016

I required this thing before bootstraping my app and now CTRL+Click and MiddleClick will let the browser do its thing.

This assumes router.ROUTER_DIRECTIVES is used in all needed directives array.

var core = require('angular2/core');
var router = require('angular2/router');

var MiddleClickRouterLink = (function () {
    function MiddleClickRouterLink(_router, _location) {
        var _this = this;
        this._router = _router;
        this._location = _location;
        this._router.subscribe(function (_) { return _this._updateLink(); });
    }
    MiddleClickRouterLink.prototype = router.RouterLink.prototype;
    MiddleClickRouterLink.prototype.onClickWithEvent = function (_) {
        if (_.ctrlKey || _.button == 1)
            return true;
        return this.onClick();
    };

    core.Directive({
        selector: '[routerLink]',
        inputs: ['routeParams: routerLink', 'target: target'],
        host: {
            '(click)': 'onClickWithEvent($event)',
            '[attr.href]': 'visibleHref',
            '[class.router-link-active]': 'isRouteActive'
        }
    })(MiddleClickRouterLink);
    Reflect.metadata('design:paramtypes', [router.Router, router.Location])(MiddleClickRouterLink);
    return MiddleClickRouterLink;
})();

router.ROUTER_DIRECTIVES[1] = MiddleClickRouterLink;

exports.MiddleClickRouterLink = MiddleClickRouterLink;
@pcroc

This comment has been minimized.

Copy link
Author

pcroc commented Feb 29, 2016

Please can this issue be assessed and prioritized? Although there is a workaround be redefining router-link (as above), this is something that badly impacts UX and will affect almost everyone.

@pcroc

This comment has been minimized.

Copy link
Author

pcroc commented Mar 31, 2016

Here is the code provided by @ThiagoT1 converted to TypeScript:

import {Directive} from 'angular2/core';
import {Router, RouterLink, Location} from 'angular2/router';

@Directive({
  selector: '[routerLink]',
  inputs: ['routeParams: routerLink', 'target: target'],
  host: {
    '(click)': 'onClickWithEvent($event)',
    '[attr.href]': 'visibleHref',
    '[class.router-link-active]': 'isRouteActive'
  }
})
export class MiddleClickRouterLink extends RouterLink {
  constructor(router: Router, location: Location) {
    super(router, location);
  }
  public onClickWithEvent(e: MouseEvent): any {
    if (e.ctrlKey || e.metaKey || e.button === 1) {
      return true;
    }
    return super.onClick();
  }
}

// Override Angular's RouterLink with our patched version
ROUTER_DIRECTIVES[1] = MiddleClickRouterLink;
@beljand

This comment has been minimized.

Copy link

beljand commented May 18, 2016

Does this work for anyone? I do catch pressed metakey, but new tab doesn't get opened.

@gracew

This comment has been minimized.

Copy link

gracew commented May 25, 2016

Looks like a fix for this is in progress, but for anyone using the suggested workarounds: make sure that you are only using the routerLink selector on <a> tags (not <li>, <div>, etc.).

Prior to switching to <a> tags I was running into the same problem as @beljand where the meta key was being captured but new tabs weren't getting opened.

@mhevery mhevery closed this in fa2ce81 May 26, 2016

tycho01 added a commit to tycho01/angular that referenced this issue Jun 21, 2016

fix(router): openning links in new tab
Clicks on router-link should not prevent browser default action when
any mouse button other than left mouse button or ctrl/meta key is pressed.

router-link href should use location strategy external url.

Closes angular#5908
Closes angular#6806
Closes angular#7749
Closes angular#8806

Closes angular#8821
@rahul-winner

This comment has been minimized.

Copy link

rahul-winner commented Oct 27, 2017

It seems still not working when I used routerLink directive within a component which is being rendered within ''

For example below code works fine and takes me to the #/jobs when I right click on hyperlink

<div>
  <app-navigation></app-navigation>
</div>
<div>
	<a routerLink="jobs">My Jobs</a>
</div>
<div>
  <router-outlet></router-outlet>
</div>

But below code does not work

<div>
  <app-navigation></app-navigation>
</div>
<div>
  <router-outlet></router-outlet>
</div>

There is a route to 'home.component.html' present within App Navigation component.

home.component.html

<div>
	<a routerLink="jobs">My Jobs</a>
</div>

I'm using Angular version 4.4.4

Could anyone please help me.

@Cmacu

This comment has been minimized.

Copy link

Cmacu commented Feb 27, 2018

I have the same issue as rahul-winner

@amaneer94

This comment has been minimized.

Copy link

amaneer94 commented Aug 20, 2018

https://stackoverflow.com/questions/41355830/angular-2-routing-run-in-new-tab

<a routerLinkActive="active" [routerLink]="['/projects']" >Projects</a>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.