Polymer app-Route Query String-Format

Question

Ich ersetzte PageJS Routing in unserer Anwendung mit app-location und app-route, und alles scheint zu arbeiten, außer den Abfrageparametern. Ich habe bemerkt, dass es nur URLs wie host?param1=val1#/view, nicht host#view?param1=val1 lesen kann, wie PageJS es gewohnt ist.

Nach weiteren Graben entdeckte ich, dass dies tatsächlich ein RFC standard ist. Ich finde es seltsam, dass PageJS und Angular das Nicht-Standard-Abfrage-String-Format verwenden können.

Gibt es eine Möglichkeit, das Attribut query-params von app-route zu verwenden, um die nicht standardmäßigen Abfrageparameter aus Gründen der Abwärtskompatibilität zu lesen?

Answer 1

Das nicht standardmäßige Formular funktioniert in PageJS, da PageJS die Abfragezeichenfolge von der URL manuell mit extracting the text that follows ? und dann parsing that for any hashes that need to be separated out analysiert. Angular könnte etwas ähnliches tun. Auf der anderen Seite verwendet <app-location> (und <iron-location>) window.location.search der Plattform zum Abrufen der Abfrageparameter.

Wenn Sie mit <iron-location> bleiben müssen, könnten Sie abwärtskompatible Unterstützung von Affe-Patching <iron-location>._urlChanged() hinzufügen, das für das Parsen der URLs für <app-location> verantwortlich ist.

Monkey-gepatchten <app-location>:

Polymer({ 
    is: 'my-app', 

    ready: function() { 
    this._setupAppLocation(); 
    }, 

    _setupAppLocation: function() { 
    // assumes <app-location id="location"> 
    const ironLocation = this.$.location.$$('iron-location'); 
    if (!ironLocation) return; 

    ironLocation._urlChanged = function() { 
     this._dontUpdateUrl = true; 
     this.path = window.decodeURIComponent(window.location.pathname); 
     if (window.location.hash.includes('?')) { 
     const parts = window.location.hash.split('?'); 
     this.hash = window.decodeURIComponent(parts[0].slice(1)); 
     this.query = parts[1]; 

     // Prepend other query parameters found in standard location 
     if (window.location.search) { 
      this.query = window.location.search.substring(1) + '&' + this.query; 
     } 
     } else { 
     this.query = window.location.search.substring(1); 
     } 
     this._dontUpdateUrl = false; 
     this._updateUrl(); 
    }; 
    } 
}); 

Alternativ Sie zu einem Polymer Elemente wechseln könnten, die Parsen Abfrageparameter unterstützt entweder in der Box bildet aus. Ich empfehle <nebula-location> (die QS als Abfragezeichenfolgenparser verwendet).

Beispiel für die Verwendung von <nebula-location>:

<nebula-location data="{{locationData}}"></nebula-location> 
<div>foo=[[locationData.queryParams.foo]]</div> 
<a href="[[rootPath]]#view?foo=123">#view?foo=123</a> 
<a href="[[rootPath]]?foo=123#view">?foo=123#view</a>