AngularJS $state如何在新标签页中打开链接

Question

我正在尝试使用$state.go函数实现“在新标签页中打开链接”的功能。如果有类似以下的东西就太好了：

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

有没有使用AngularJS实现这个的方法？

- Alex Arvanitidis

---

问题中的编辑说明您使用以下代码解决了它似乎是多余的。也就是说，由于您选择它作为接受的答案，这是可以推断出来的。 - Adam Zerner

已修复，已移除编辑。 - Alex Arvanitidis

你可以在这里找到答案 Angularjs $state 在新标签页中打开链接。 - Dalorzo

Answer 1

更新：好的，我刚刚使用以下代码解决了它：

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');

- Alex Arvanitidis

---

最佳实践不应该是$window吗？ - Taku

你确定参数可以传递到新窗口吗？ - hjl

是的 @elaijuh，它们将被传递。 - Manuel Di Iorio

@alex 我想要定位一个指定的窗口，所以我尝试使用 window.open(url,'myWindow'); 但是它没有起作用。有什么帮助吗？ - mhd

请注意，如果您以这种方式从JavaScript打开链接并且基本URL更改，则浏览器很可能会阻止它，并说该站点尝试打开弹出窗口，但是如果用户接受或授权您的网站这样做，则它将起作用。 - GabLeRoux

Answer 2

我刚刚尝试了一下——显然，在ui-sref中添加target="_blank"可以起作用：

<a ui-sref="routeHere" target="_blank">A Link</a>

省去了在控制器中添加代码的麻烦，同时像普通链接一样悬停时会给您提供URL。双赢！

- Patrick Calulo

---

这仅适用于<a>元素。显然，"target"在其他元素上不起作用。例如：<button ui-sref="routeHere" target="_blank">链接</button> - Luis

@Luis 按钮没有目标属性，所以它不起作用。 - gerl

@Luis 或许你可以使用按钮相关的类和将角色设为按钮，使锚点标签看起来像一个按钮。例如：<a ui-sref="routeHere" target="_blank" class="btn btn-primary" role="button">链接</a> - Safwan

Answer 3

如果你的应用程序在子文件夹中，它可能在本地主机上无法正常工作。我曾经遇到过同样的问题。

我尝试了在线方案，通过使用以下方法解决：

<a ui-sref="routeHere" target="_blank">Link</a>

- FrancescoMussi

Answer 4

我遇到了类似的问题，如果之前的回答没有帮到你，尝试一下这个方法。

var url = '#' + $state.href('preview');
window.open(url,'_blank');

基本上，在本地工作时，如果不添加'#'，它只会重定向到

localhost/preview

而不是

localhost/Project_Name/#/preview

。我这里并不讨论传递数据，只是为了在新标签页中打开 $state。

- Deepak Bandi

Answer 5

ui-sref="routeHere" href=""target="_blank"

这段代码解决了我的问题。

在锚点标签中使用此代码。

- Zubair sadiq

Answer 6

我找到的最佳答案是扩展ui.router，因为该功能不存在内置。您可以在此处找到完整的详细信息： 扩展Angular 1.x ui-router的$state.go 然而，以下是我简短的解释，需要将其添加到app.js或angular应用程序初始化文件中：

angular.module("AppName").config(['$provide', function ($provide) {
    $provide.decorator('$state', ['$delegate', '$window',
        function ($delegate, $window) {
            var extended = {
                goNewTab: function (stateName, params) {
                    $window.open(
                        $delegate.href(stateName, params, { absolute: true }), '_blank');
                }
            };
            angular.extend($delegate, extended);
            return $delegate;
        }]);
}]);

在你的代码中

你将能够做到：

$state.goNewTab('routeHere', { parameter1 : "parameter"});

- Dalorzo

Answer 7

请尝试这个！ <a ui-sref="routeHere({parameter: vm.parameter})" target="_blank"></a>

- Miko

---

这是无关的，我没有说我需要向调用的路由添加参数，我是想在新标签页中打开此路由。 - Alex Arvanitidis

这可能对很多人有用。我刚刚使用了这个。这里需要提醒的一件事是参数名称应该用单引号括起来。 <a ui-sref="routeHere({'parameter': vm.parameter})" target="_blank"></a> - Sudheer Muhammed