ui-router: stan otwarty w nowej karcie z target = "_ blank", utracono parametry

Question

Robię aplikację kątową, w której wiersze tabeli mają każdy przycisk, a po kliknięciu tych przycisków powinna zostać dodana nowa zakładka otwarty dla wiersza, w którym przycisk jest włączony.

Musiałem przekazać parametry do nowej zakładki utworzonej w ten sposób. Mam ogłoszony parametr w inicjalizacji Stan:

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

i przycisk ma coś takiego:

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

params są przekazywane w, wszystko działa zgodnie z oczekiwaniami.

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

Ale dodanie target="_blank" do znacznika <a> powoduje $ state.params obiekt do powrotu następujące:

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

Rozglądałem się przez kilka godzin, szukałem w dokumentacji routera-ui oraz narzędzie do śledzenia problemów, które dotyczy mojej sytuacji, ale niczego nie znalazłem.

Czy parametry stanu nie są przekazywane na łączach target='_blank' "ed ui-sref?

Answer 1

Jeśli istnieje jakikolwiek parametr, który powinien być dostępny poza obecnym kontekście SPA (nowe okna, nowa karta) - to MUST być częścią adresu URL.

to będzie działać:

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

Więcej szczegółów o params How to pass parameters using ui-sref in ui-router to controller

Answer 2

Jest też inny sposób bez korzystania z adresu URL. Zamiast adresu URL możesz użyć adresu LocalStorage.

Użyj ng-click na łączu i wywołaj funkcję. W funkcji wpisz swoje parametry w LocalStorage. Następnie użyj opcji i sprawdź, czy LocalStorage ma parametry. Następnie uzyskaj params i zadzwoń $state z 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>