如何在不重新加载的情况下使用 [routerLink] 和 target="_blank" 导航到内部页面？答案

【问题标题】：How can I navigate to an internal page using [routerLink] and target="_blank" without reload?如何在不重新加载的情况下使用 [routerLink] 和 target="_blank" 导航到内部页面？
【发布时间】：2019-08-26 06:51:41
【问题描述】：

我正在尝试使用 [routerLink] 和 target="_blank" 导航到内部页面，而无需重新加载整个应用程序。

我可以让页面加载到另一个选项卡中，但整个应用程序会重新加载。

HTML：

<a [routerLink]="getRouterLink(parm1,parm2)" target="_blank">

打字稿：

public getRouterLink = function(parm1: string , parm2: string ) : any[] {
    let link : any[] = ['/pages/myPage', {}];
    let params = {};
    params['parm1'] = parm1;
    params['parm2'] = parm2;

    link[1] = params;

    return link;
  };

有没有办法让它导航到新页面而不重新加载应用程序？

【问题讨论】：

好吧，如果打开一个新标签，您的浏览器当然会重新加载应用程序。没有办法阻止这种情况（这甚至会如何工作？）。你想在这里达到什么目的？也许还有其他解决方案。
Angular 6 routerLink on a new tab的可能重复

标签： javascript angular html angular6

【解决方案1】：

不，绝对无法在不重新加载的情况下在新标签页中打开应用。

您可以创建第二个轻量级应用（因此加载速度非常快）并在新选项卡中打开它。

或者，如果您使用lazy loading 并在新选项卡中打开它，它只会加载所需的组件，这会相对较快。

【讨论】：

【解决方案2】：

有没有办法让它导航到新页面而不重新加载应用程序？

不，因为当您打开一个新选项卡时，应用程序将从 index.js 加载。

【讨论】：

【解决方案3】：

我之前在here 上回答过类似的问题。由于 Angular 的引导方式，无法防止重新加载。但简而言之，如果你想在新标签页上打开它，你应该在你的 component.ts 上使用它：

const url = 'www.domain.com/pages/myPage?params=value';
window.open(url, '_blank');

或者只是在你的 component.html 上，

<a href="www.domain.com/pages/myPage?params=value" target="_blank">

但是，如果必须使用 routerLink，还有其他方法，例如编写自己的自定义指令。在here 上查看它，该人已经编写了它的示例实现。

【讨论】：

【解决方案4】：

页面不可能不重新加载，角度的工作方式！你可以简单地使用

&lt;a href="#" target="_blank"&gt;

【讨论】：