如何使用 $location, angular 在浏览器中打开新标签页？答案

【问题标题】：How to open new tab in browser by using $location, angular?如何使用 $location, angular 在浏览器中打开新标签页？
【发布时间】：2019-09-05 14:42:13
【问题描述】：

我有控制器 'reportCtrl' 和 HTML，它代表 6 个带有数据的表格，我一次只显示几行。

app.js

var appReport = angular.module('myAppReport', []);

appReport.config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/showreport', {templateUrl: 'app/reports/reportsView.html', controller: 'reportCtrl'});
            $routeProvider.when('/showreport/:type', {templateUrl: 'app/reports/reportsView.html', controller: 'reportCtrl'});

每个表格都有一个按钮，点击后应在浏览器中打开带有扩展表格的新标签：

scope.onClick = function(path){
    var real_path = $location.path() + '/' + path + '/';
    $location.path( real_path );
    // $window.open($location.path()); // doesn't work
};

例如我有根视图 URL：

http://dev.test.com/reports/date/#/showreport

现在，按下按钮后我想创建：

http://dev.test.com/reports/date/#/showreport/table_name

并在新标签中打开它。如您所见，我尝试了$window.open($location.path());，但它不起作用，没有任何反应。

谢谢，

【问题讨论】：

看看这个：stackoverflow.com/questions/4907843/…
你混淆了角度路径，它位于 url 中的哈希之后，带有完整的 url
@charlietfl 你能解释一下吗？我写错了吗？谢谢
$window.open 应该可以工作。您是否正确注入了$window 服务？您也可以尝试这样称呼它：$window.open(real_path,'_blank');。请提供更多信息/代码或 plunk，以便我们更好地了解问题。
window 和 $window 差别不大。如果你不能使用$window，你可以试试var win=window.open(real_path , '_blank');

标签： angularjs

【解决方案1】：

您正在使用另一个可能使 Angular 混淆的函数打开一个新窗口。

尝试在$window.open(real_path) 中传递字符串，其中 real_path 是包含您要导航的路径的字符串

【讨论】：

欢迎来到 SO。更具体地说明您的代码示例，并使用来自实际问题的更正代码。
你能解释一下这会导致角度混乱吗？

【解决方案2】：

如果您想在 ctrl+click 或同一选项卡的新选项卡中打开角度页面，请尝试以下操作：-

HTML：

<a ng-click="navigationUrl($event)">My Link</a>

JS：

    var navigationUrl = function (event) {
            if (event.ctrlKey) {
                window.open(url, '_blank'); // in new tab
            } else {
                $location.path(url); // in same tab
            }
        };

【讨论】：

【解决方案3】：

另一种选择是使用 ng-href

HTML：

 <a  ng-href="#/courses/{{employee.courseId}}/employees/{{employee.id}}" 
      target="_blank"> {{employee.employeeNumber}}
 </a>

url 取决于你要重定向的位置

【讨论】：

如果我右键单击并选择“在新选项卡中打开链接”，这会起作用吗？
@AkashAgrawal 是的

【解决方案4】：

虽然这里投票最多的答案可能适用于大多数情况，但我想添加我发现的方式来实现 OP 想要的（我也需要这个）：

var viewPath = '/InsideMyView';
var currentPath = window.location.href.substr(0, window.location.href.indexOf('#') + 1);
var fullPath = currentPath + viewPath;
$window.open(fullPath, '_blank');

说明：您只需要获取您的应用的根URL，您可以在url中使用#（由angular添加），然后将视图路径连接到获取完整的网址。

【讨论】：

【解决方案5】：

要在新窗口中打开新视图，请执行以下代码：

window.open($location.$$absUrl.replace($location.$$path,NEW_PATH), '_blank');

【讨论】：

【解决方案6】：

这对我有用。

HTML: <div ng-click="OpenBrowserInNewTab(someKeyValue)"</div>Click Me </div>

控制器：

`$scope.OpenBrowserInNewTab = (someKeyValue) ->
    tabWindowId = window.open('/abcdef/ghijk/' + someKeyValue + '', _blank')

    $http.post("/abcdef/ghijk/#someKeyValue", data).then (response) ->
        tabWindowId.location.href = response.headers('Location')
        return
    return`

【讨论】：

【解决方案7】：

使用角度参数在新选项卡中打开视图

   <a  target="_blank" class="btn" data-ng-href="@Url.Action("Hotel", "Home")?hotelCode={{hotel.code}}"> Click Hear</a>

【讨论】：

【解决方案8】：

试试这个?

window.open(yourURL+'create-account',)

window.open 默认在新标签中打开链接

【讨论】：

他为什么要这么做？那有什么作用？
window.open 默认在新标签中打开链接