fix(router): If users are using the Alt key when clicking the router links, prioritize browser’s default behavior (#38375)
In most browsers, clicking links with the Alt key has a special behavior, for example, Chrome downloads the target resource. As with other modifier keys, the router should stop the original navigation to avoid preventing the browser’s default behavior. When users click a link while holding the Alt key together, the browsers behave as follows. Windows 10: | Browser | Behavior | |:-----------|:--------------------------------------------| | Chrome 84 | Download the target resource | | Firefox 79 | Prevent navigation and therefore do nothing | | Edge 84 | Download the target resource | | IE 11 | No impact | macOS Catalina: | Browser | Behavior | |:-----------|:--------------------------------------------| | Chrome 84 | Download the target resource | | Firefox 79 | Prevent navigation and therefore do nothing | | Safari 13 | Download the target resource | PR Close #38375
This commit is contained in:
parent
b0c79f2373
commit
c880e393e9
|
@ -432,7 +432,7 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
|
|||
constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy);
|
||||
ngOnChanges(changes: SimpleChanges): any;
|
||||
ngOnDestroy(): any;
|
||||
onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean;
|
||||
onClick(button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean): boolean;
|
||||
}
|
||||
|
||||
export declare class RouterModule {
|
||||
|
|
|
@ -359,9 +359,12 @@ export class RouterLinkWithHref implements OnChanges, OnDestroy {
|
|||
}
|
||||
|
||||
/** @nodoc */
|
||||
@HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey', '$event.shiftKey'])
|
||||
onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean {
|
||||
if (button !== 0 || ctrlKey || metaKey || shiftKey) {
|
||||
@HostListener(
|
||||
'click',
|
||||
['$event.button', '$event.ctrlKey', '$event.shiftKey', '$event.altKey', '$event.metaKey'])
|
||||
onClick(button: number, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean):
|
||||
boolean {
|
||||
if (button !== 0 || ctrlKey || shiftKey || altKey || metaKey) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue