angular2：为什么 window.location.href 会导致 Firefox 上的页面刷新，但 href 不会

Question

我正在使用 Angular2，并且我有一种下载文件的方法...一切正常，但我使用的是 <a> 并使用 href='routetodownload' 下载了文件在某些​​情况下我被要求禁用此链接并且然后决定将<a> 更改为<button>（无论哪种方式，链接都作为按钮工作）并且这样做，而不是使用href 属性，我创建了一个函数。
HTML

<button (click)="download(url)">download</button>

打字稿

download(url) {
    window.location.href = url;
}

但这会在firefox上导致奇怪的行为，当我点击下载时，会出现保存对话框，但在它后面，页面刷新。使用<a href='url'>时，出现另存为对话框时页面不刷新

只有在使用 Firefox 时才会发生这种情况...Edge 和 Chrome 在这两种情况下都可以正常工作。

我想知道为什么 window.location.href 会在 Firefox 上导致自动刷新。

如果有人对此有任何想法，请告诉我

更新

毕竟，问题出在NG Live Development Server（来自 angular-cli ng serve 命令）...我不知道为什么这只发生在 Firefox 上。问题是，我的应用程序托管在 IIS 上，使用它的解决方案没有刷新。

稍后我会和 angular-cli 团队的人一起检查一下这种行为可能是什么......

谢谢大家。

问候

Answer 1

这只发生在本地 angular-cli 实时服务器上，因为默认情况下，所有路由都会路由到 /index.html，它是应用程序的根目录。 Angular 路由器找不到您的文件 URL，只会将您带到默认路由。

Answer 2

我总是用这个：

<a href="/images/myw3schoolsimage.jpg" download>

添加下载属性以获得更好的结果。

Answer 3

禁用链接的另一种方法是使用 Javascript 取消超链接激活事件。

某些事件被指定为可取消的。对于这些事件，DOM 实现通常具有与事件关联的默认操作。这方面的一个例子是网络浏览器中的超链接。当用户单击超链接时，默认操作通常是激活该超链接。在处理这些事件之前，实现必须检查注册的事件侦听器以接收事件并将事件分派给这些侦听器。然后，这些侦听器可以选择取消实现的默认操作或允许默认操作继续进行。如果是浏览器中的超链接，取消操作会导致超链接不被激活。

https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

例如：

<a [attr.href]="isDisabled(link) ? null : 'link.href'"
   [class.disabled]="isDisabled(link)"
   (click)="!isDisabled(link)">
   {{ link.name}}
</a> 

Answer 4

window.location.href 试图加载另一个 HTML 页面，但您处于例外情况。

您应该将其替换为：

download(url) {
    window.open(url);
}

或者试试这样的：

download(url) {
    link = document.createElement('a');
    link.href = url;
    ...
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}