ui-router: trạng thái mở trong tab mới với target = "_ blank", thông số bị mất

Question

Tôi đang làm một ứng dụng Góc, trong đó các hàng của bảng có một nút và mỗi lần nhấp vào các nút này sẽ là tab mới đã mở cho hàng mà nút đó đang bật.

tôi cần phải vượt qua các thông số vào tab mới được tạo ra theo cách này. Tôi đã tuyên bố tham số trong việc khởi tạo trạng thái:

.state('viewlisting', { 
    url: "/listings/:id", 
    params: { 
    'action': '', 
    }, 
    controller: 'ListingsController', 
    templateUrl: "partials/listings/view_listing.html" 
}); 

và nút có một cái gì đó như thế này:

ui-sref='viewlisting({id:"+data+", action:"images"})' 

Các params được thông qua tại, mọi thứ hoạt động như mong đợi.

//URL: /#/listings/42 
$state.params.action //returns "images" 
$state.params.id //returns "42" 

Nhưng thêm target="_blank" cho thẻ <a> làm cho $ state.params đối tượng để trả lại như sau:

//URL: /#/listings/42 
$state.params.action //returns "" 
$state.params.id //returns "42" 

Tôi đã tìm kiếm nhiều giờ, tôi đã xem xét các tài liệu ui-router và bộ theo dõi vấn đề cho một cái gì đó giải quyết tình hình của tôi nhưng tôi đã không tìm thấy gì cả.

Thông số trạng thái không được chuyển trên các liên kết target='_blank' 'ed ui-sref?

Answer 1

Nếu có bất kỳ tham số mà nên có sẵn bên ngoài bối cảnh hiện tại SPA (cửa sổ mới, tab mới) - nó PHẢI là một phần của url.

này sẽ làm việc:

.state('viewlisting', { 
    // instead of this 
    // url: "/listings/:id", 
    // this will keep the action in a new window 
    url: "/listings/:id?action", 
    params: { 
    'action': '', 
    }, 
    controller: 'ListingsController', 
    templateUrl: "partials/listings/view_listing.html" 
}); 

Thông tin chi tiết về params How to pass parameters using ui-sref in ui-router to controller

Answer 2

Có một cách khác mà không sử dụng các URL. Bạn có thể sử dụng LocalStorage thay vì URL.

Sử dụng ng-click trên thẻ liên kết và gọi hàm. Trong hàm, hãy đặt các tham số của bạn trong LocalStorage. Sau đó, trong app.run hãy sử dụng $rootScope.$on("$stateChangeStart") và kiểm tra xem LocalStorage có thông số hay không. Sau đó, nhận params và gọi $state với params.

//in page controller: 
 
var openNewTab = function() {     
 
        localStorage.newTab = JSON.stringify({ 
 
         state: "yourState", 
 
         params: { 
 
          param1: "someparam1", 
 
          param2:"someparam2" 
 
         } 
 
        });     
 
        window.open(document.location.origin); 
 
         
 
       } 
 
    
 
//angular app run config: 
 
angularApp.run(function($state){ 
 
if(localStorage.newTab){ 
 
    var newTab = JSON.parse(localStorage.newTab); 
 
    localStorage.removeItem("newTab"); 
 
    $state.go(newTab.state, newTab.params); 
 
    event.preventDefault(); 
 
} 
 
})

<a ng-click="openNewTab()" >open new tab</a>