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

Question

我正在使用 Angular2 并且我有一种下载文件的方法......一切正常，但我使用的是<a>并使用href='routetodownload'下载文件我被要求在某些情况下禁用此链接，然后a 决定将<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

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);
}

Answer 4

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

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

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>