UI-Router: Zustand in neuem Tab öffnen mit target = "_ blank", Parameter sind verloren

Question

Ich mache eine Angular App, in der die Zeilen einer Tabelle jeweils eine Schaltfläche haben, und beim Klicken auf diese Schaltflächen sollte eine neue Registerkarte sein für die Zeile geöffnet, die diese Schaltfläche aktiviert ist.

Ich musste Parameter in die neue Registerkarte, die auf diese Weise erstellt wurde, übergeben. Ich habe den Parameter in der Zustandsinitialisierung erklärt:

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

und der Knopf hat etwas Ähnliches:

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

Die params in übergeben werden, alles wie erwartet funktioniert.

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

Aber das Hinzufügen target="_blank" zum <a> Tag bewirkt, dass das Objekt state.params $ Folgendes zurück:

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

ich stundenlang gesucht habe, habe ich an der ui-Router-Dokumentation angesehen und der Problem Tracker für etwas, das meine Situation anspricht, aber ich habe nichts gefunden.

Sind die Zustandsparameter nicht weitergegeben target='_blank' 'ed ui-sref Links?

Answer 1

Wenn es einen Parameter, der verfügbar außerhalb des aktuellen SPA Kontext sein sollte (neues Fenster, neue Registerkarte) - es MUST Teil der URL sein.

Dies funktioniert:

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

Mehr Details über params How to pass parameters using ui-sref in ui-router to controller

Answer 2

ist eine weitere Möglichkeit gibt, ohne die URL. Sie können LocalStorage anstelle der URL verwenden.

Verwenden Sie ng-click auf dem Link-Tag und rufen Sie eine Funktion auf. In der Funktion setzen Sie Ihre Parameter in LocalStorage. Dann in app.run$rootScope.$on("$stateChangeStart") verwenden und prüfen, ob LocalStorage Parameter haben. Dann erhalten Sie params und rufen Sie $state mit 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>