2016-10-07 16 views
5

Uygulamamdaki uygulamasında <app-route> öğesini kullanıyorum.sorgu paramları

URL adresindeki sorguParams'ı yakalamak istiyorum.

localhost: 8080/#/test foo = çubuk & baz = qux

yazdım kod: Yukarıdaki URL'yi kullandığınızda

<app-location id="location" route="{{route}}" use-hash-as-path></app-location> 
<app-route id="route" 
     route="{{route}}" 
     pattern="/:page" 
     data="{{routeData}}" 
     tail="{{subroute}}"></app-route> 

alıyorum

this.$.route.routeData.page = "test?foo=bar&baz=qux" 
this.$.route.queryParams = {} 

bekliyordum

this.$.route.queryParams = { 
    foo : "bar", 
    baz : "qux" 
} 
this.$.route.routeData.page = "test" 

ve

ben polimer belgelerinde örnek baktı, ama yardım etmedi. Neyi kaçırıyorum?
Yanlış bir şey mi bekliyorum? QueryParams nasıl çalışır?

Herhangi bir yardım için teşekkür ederiz. <app-location>.queryParams için

cevap

5

yapmanız cevap almak nedeni url yanlış olmasıdır. # Parçası sonunda gelir.

deneyin url

localhost: 8080/foo = çubuk & baz = qux #/test

ipucu sorgu parametreleri eklendiğini görünen sayfa parametresinde olduğu sayfa parametresine Onlar yoktu, ancak tarayıcı sadece onların karma parçası olduğunu düşünüyor ve onları window.location.hash'da geçiriyor. app-location karma parçasının ayrışmasını '/' üzerine bölerek, her şeyin bir parçası olduğunu düşünür: sayfa kalıbı.

+0

Bu öğenin normal URL'leri kabul etmesinin bir yolu var mı? en sonunda params. Bu biçim işe yarıyor ama garip ve standart değil. –

+1

@ShreepadPatil Bu *, hash yolları için normal bir URL'dir. Bir URI'de '#' izleyen tüm metinler tek bir * parça tanımlayıcı * olarak kabul edilir ve standart ([RFC 3986] (http://tools.ietf.org/html/rfc3986#section-4.1)) belirtir parça tanımlayıcısının son olduğunu. Bkz. Http://superuser.com/a/498625/68227. – tony19

3

Bind sorgu parametrelerini almak için: __queryParams:

<app-location route="{{route}}" query-params="{{queryParams}}"> 

Not Ayrıca <app-location>.route sorgu parametrelerini içeren bir iç özelliği vardır. Teknik olarak, bunu bir sonraki sürümde kullanılamayacak şekilde uyarmakla kullanabilirsiniz. (yani, this.route.__queryParams === this.queryParams).

codepen

+0

this.route, aslında her iki "__queryParams" ve "queryParams" değerine sahip ve ikincisi, bir gözlemcideki eski değişiklikler değiştiğinde güncellenir. Neden bu işe yaramadı sorusuna bakın – akc42

+1

@ akc42, 'this.route .__ queryParams 'bu this.route.queryParams'a bağlanırken, ikincisi OP'in ne yapmaya çalıştığı, okunabilir değil. Bkz. Https://codepen.io/tony19/pen/qaoBJJ?editors=1001&foo=1&bar=1 – tony19

+0

@ tony19 Polimer app-location/app-route tarafından kullanılan bu formatın aslında bir standart olduğunu öğrenmek beni şaşırttı. Çünkü şimdiye kadar hiç bu kadar pratikte görmedim. Bunu kendi kendime kazıyorum (https: // stackoverflow.com/questions/45379395/polymer-app-route-query-string-formatı) sayfa jsm'den app-route'a geçişi gerçekleştirirken ve geriye dönük uyumluluk bu durumda bir endişe kaynağıdır. Bu uyumu uygulama rotası ile nasıl koruyabilirim? Ve Angular ve PageJ'ler SPA'larda sorgu dizeleri için bu formatı nasıl kullanır? – DaJackal