Wie die Query-String in Web-Adresse URL in Angular State Router mit State-Go-Methode

Question

bilden Ich habe eine Produktliste Seite, gibt es eine Liste von Produkten, wenn Sie auf die bestimmten Produkte, rufen Sie die Funktion und im Funktionszustand. gehen.

arbeiten nicht in dynamisch:

$ state.go ('home.product.detail', { 'ProductId': "redminote4", 'Marke': 'x', "store": "Amazon"});

.state('home.product.detail', { 
    url: '/products/:?productID?brand?store', 
    views: { 
     '@': { 
      templateUrl: baseUrl + 'products/products', 
      controller: 'productsController' 
     } 
    }, 
    data: { 
     displayName: '', 
     displayImg: 'Images/productsHeaderIcon.png' 
    }, resolve: { 

     param2: function (LoginHome) { 

      return LoginHome.getHomeService1(); 

     } 
    } 

**

Output weburl need to be: 
productID=redminote4&brand=amazon&store=amazon: 

andere Sache Wert wird in stateparams bekommen: eg) stateparams.productId = redminote aber url nicht konstruiert **

adaequat:

Wenn ich den Wert in param setze, bekomme ich die oben erwähnte Ausgabe:

**function call:** 

$state.go('home.product.detail', { 
'productID': "redminote4", 'brand': 'x', "store":"amazon" }); 

App:

.state('home.product.detail', { 
    url: '/products/:?productID?brand?store', 
params:{ 
'productID': "redminote4", 
'brand': 'x', 
"store":"amazon" } 

}, 
     views: { 
      '@': { 
       templateUrl: baseUrl + 'products/products', 
       controller: 'productsController' 
      } 
     }, 
     data: { 
      displayName: '', 
      displayImg: 'Images/productsHeaderIcon.png' 
     }, resolve: { 

      param2: function (LoginHome) { 

       return LoginHome.getHomeService1(); 

      } 
     } 

warum die URL nicht in dynamisch gebildet?

Answer 1

Die Art und Weise, wie die Parameter in Ihrer URL definiert sind, ist falsch. Wie auch immer, ist eine Option, die Lifecycle-Methoden zu verwenden und gibt ein Ziel

.state('home.product.detail', { 
    url: '/products/?productID&?brand&?store', 
    params:{ 
     'productID': { 
      value: "redminote4", 
      squash: true 
     } 
     'brand': { 
      value: "x", 
      squash: true 
     }, 
     'store': { 
      value: "amazon", 
      squash: true 
     } 
}, 
data: { 
    displayName: '', 
    displayImg: 'Images/productsHeaderIcon.png' 
}, 
onEnter: ['$transition$', '$state$', 'LoginHome', function(transition, state, LoginHome){ 

    if(!transition.options().resolvedParams){ 
     return transition.router.stateService.target(
       transition.to().name, 
       { 
        productID: 'redminote4', 
        brand: 'x', 
        store:'amazon' 
       }, 
       { 
        resolvedParams: true 
       } 
      ); 
     } 
    }] 

Dieser die Zustandsänderung unterbricht und ersetzt es mit dem neuen Ziel, das jetzt mit Ihrem Parameter bevölkert ist und einen benutzerdefinierten Schlüssel in der Optionen-Objekt, das Ich verwende in diesem Beispiel, um die Statusänderung nicht erneut umzuleiten.

Sie können mehr über den Lebenszyklus erfahren here und TargetState wir zurückkehren here